Canvas Support

Auto play not working on Swiper-Slider

4 replies · opened Feb 20, 2017

OobjetdaFeb 20, 2017

I'm using the canvas swiper slider and added both data-loop=”true” to have it loop and data-swiper-autoplay="2000" for the duration. The slider will not auto play and I have to click the nav buttons to scroll through images?

Questions

  1. how to activate auto play
  2. how to set the duration of each slide
  3. I'm using the dot menu will this effect the auto play

Please see the below code from the relevant section, I have also linked swiper.css in the head;

<section id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 1000px;" data-loop="true" data-effect="fade">

		&lt;div class="swiper-container swiper-parent"&gt;
			&lt;div class="swiper-wrapper"&gt;
				&lt;div class="swiper-slide" data-swiper-autoplay="2000" style="background-image: url('images/slider/swiper/1.jpg'); background-position: center top;"&gt;
					&lt;div class="container clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
				&lt;div class="swiper-slide" data-swiper-autoplay="2000" style="background-image: url('images/slider/swiper/2.jpg'); background-position: center top;"&gt;
					&lt;div class="container clearfix"&gt;
					&lt;/div&gt;
  &lt;/div&gt;
				&lt;div class="swiper-slide" data-swiper-autoplay="2000" style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;"&gt;
					&lt;div class="container clearfix"&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div id="slider-arrow-left"&gt;&lt;i class="icon-angle-left"&gt;&lt;/i&gt;&lt;/div&gt;
			&lt;div id="slider-arrow-right"&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/div&gt;
		&lt;/div&gt;
        
        [](#)

	&lt;/section&gt;
OobjetdaFeb 20, 2017

Although it won't effect my initial question I just noticed that code first attached has the iclass line not complete, but it is correct in the code (see below);

SSemicolon WebSTAFFFeb 22, 2017

Hello,

  1. Please use data-autoplay="2000" instead.

  2. Unfortunately this is not supported at the moment.

  3. The Solution provided for Q1. will definitely fix your issue.

Hope this Helps!

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

OobjetdaMar 7, 2017

Please see the code how it is currently setup with changes recommended - data-autoplay="2000" still not making this autoplay?

<section id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 1000px;" data-loop="true" data-effect="fade">

		&lt;div class="swiper-container swiper-parent"&gt;
			&lt;div class="swiper-wrapper"&gt;
				&lt;div class="swiper-slide" data-autoplay="2000" style="background-image: url('images/slider/swiper/1.jpg'); background-position: center top;"&gt;
					&lt;div class="container clearfix"&gt;&lt;/div&gt;

</div>
<div class="swiper-slide" data-autoplay="2000" style="background-image: url('images/slider/swiper/2.jpg'); background-position: center top;">
<div class="container clearfix">
<!-- <div class="slider-caption">
<h2>Head B</h2>
<p>Caption</p>
</div> -->
</div>
</div>
<div class="swiper-slide" data-autoplay="2000" style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;">
<div class="container clearfix">
<!-- <div class="slider-caption">
<h2>Head C</h2>
<p>caption</p>
</div> -->
</div>
</div>
</div>
<div id="slider-arrow-left"><i class="icon-angle-left"></i></div>
<div id="slider-arrow-right"><i class="icon-angle-right"></i></div>
</div>

SSemicolon WebSTAFFMar 22, 2017

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. 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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard