Canvas Slider Won't Show Images

WwlbradleyApr 6, 2023

Canvas Slider won't show images.

[CODE - WEBSITE NOT LIVE]
Neither of the icon arrows are showing for the slider navigation.

` <section id="slider" class="slider-element slider-parallax swiper_wrapper" style="height: 400px;">
<div class="slider-inner">

	&lt;div class="swiper-container swiper-parent"&gt;
		&lt;div class="swiper-wrapper"&gt;

			&lt;!-- First Slide --&gt;
			&lt;div class="swiper-slide-bg"&gt;
				&lt;!-- Slider Content --&gt;
				&lt;div class="swiper-slide-bg" style="background-image: url('agency/images/slider/1.jpg');"&gt;&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Second Slide --&gt;
			&lt;div class="swiper-slide-bg"&gt;
				&lt;!-- Slider Content --&gt;
				&lt;div class="swiper-slide-bg" style="background-image: url('agency/images/slider/2.jpg');"&gt;&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Third Slide --&gt;
			&lt;div class="swiper-slide-bg"&gt;
				&lt;!-- Slider Content --&gt;
				&lt;div class="swiper-slide-bg" style="background-image: url('agency/images/slider/3.jpg');"&gt;&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="slider-arrow-left"&gt;&lt;i class="icon-angle-left"&gt;&lt;/i&gt;&lt;/div&gt;
		&lt;div class="slider-arrow-right"&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/div&gt;
	&lt;/div&gt;

&lt;/div&gt;

</section>

SSemicolon WebSTAFFApr 7, 2023

Hello,

The Codes you are using is incorrect. These are the correct codes:
[ch_pre]

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WwlbradleyApr 7, 2023

Nothing.

It simply shows all three slides at one time.

Code Below:

<!– First Slide –>
<div class=”swiper-slide”>
<!– Slider Content –>
<div class=”swiper-slide-bg” style=”background-image: url(‘seo/images/hero/hero-1.jpg’);”>
<div class="vertical-middle slider-element-fade">
<div class="container py-5">
<div class="row pt-5">
<div class="col-lg-5 col-md-8">
<div class="slider-title">
<div class="badge rounded-pill badge-default">PPC Ad Management</div>
<h2 class="text-rotater mb-4" data-separator="," data-rotate="fadeIn" data-speed="3500">Stop Paying for Clicks.<br />Start Getting More<span class="t-rotate">Leads.,Sales.,Registrations.,Customers.,Real Results!</span></h2>
<h3>Try Our Risk-Free PPC Services</h3>
<p>Don't pay unless you get the results you wanted. We don't charge a percentage of your ad spend as payment. Instead we EARN our payment when we produce the results you need.</p>
Get Started
Contact Us
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!– Second Slide –>
<div class=”swiper-slide”>
<!– Slider Content –>
<div class=”swiper-slide-bg” style=”background-image: url(‘seo/images/hero/hero-1.jpg’);”>
<div class="vertical-middle slider-element-fade">
<div class="container py-5">
<div class="row pt-5">
<div class="col-lg-5 col-md-8">
<div class="slider-title">
<div class="badge rounded-pill badge-default">Pro Video Services</div>
<h2 class="text-rotater mb-4" data-separator="," data-rotate="fadeIn" data-speed="3500">Stop Paying for Clicks.<br />Start Getting More<span class="t-rotate">Leads.,Sales.,Registrations.,Customers.,Real Results!</span></h2>
<h3>Try Our Risk-Free PPC Services</h3>
<p>Don't pay unless you get the results you wanted. We don't charge a percentage of your ad spend as payment. Instead we EARN our payment when we produce the results you need.</p>
Get Started
Contact Us
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!– Third Slide –>
<div class=”swiper-slide”>
<!– Slider Content –>
<div class=”swiper-slide-bg” style=”background-image: url(‘seo/images/hero/hero-1.jpg’);”>
<div class="vertical-middle slider-element-fade">
<div class="container py-5">
<div class="row pt-5">
<div class="col-lg-5 col-md-8">
<div class="slider-title">
<div class="badge rounded-pill badge-default">Social Meida Management</div>
<h2 class="text-rotater mb-4" data-separator="," data-rotate="fadeIn" data-speed="3500">Stop Paying for Clicks.<br />Start Getting More<span class="t-rotate">Leads.,Sales.,Registrations.,Customers.,Real Results!</span></h2>
<h3>Try Our Risk-Free PPC Services</h3>
<p>Don't pay unless you get the results you wanted. We don't charge a percentage of your ad spend as payment. Instead we EARN our payment when we produce the results you need.</p>
Get Started
Contact Us
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=”slider-arrow-left”><i class=”icon-angle-left”></i></div>
<div class=”slider-arrow-right”><i class=”icon-angle-right”></i></div>
</div>

</div>
</section>

WwlbradleyApr 7, 2023

Got it working on desktop.

There were issues with character coding when I pulled them into my code editor.

All " and ' needed to be replaced. Now everything is working. Thank you.

But now it won't work on mobile.

Do I need to check breakpoints?

SSemicolon WebSTAFFApr 7, 2023

Hello,

Everything should work fine by default out of the box. If you are facing issues with character encodings, we recommend using either VS Code or Sublime Text. The Live Previews are a mirror copy of the Codes provided with the Package, so everything should work fine. Additionally, in these cases we need a Live URL to investigate further. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.