CODEWITHSUNDEEP
jqueryimage-galleryswiper.js
Birdie Golden
Birdie Golden

Reputation: 571

Issues with Swiper Carousel Disappearing - How to Make Continuous

I am using Swiper Carousel to make a slider and have run into a glitchy issue that I'm hoping someone with more experience than me can solve.

The Issue When scrolling the slider left or right, it glitches out and disappears. You can bring it back by randomly scrolling in the white space, but to the end user it looks like it's completely gone.

The Goal No matter how many images, the slider will essentially duplicate itself vs showing a white space ending. For example:

Slide 1, Slide 2, Slide 3, Slide 1, Slide 2, Slide 3...

vs

Slide 1, Slide 2, Slide 3, white space, glitch out, disappear, glitch back in...

Currently I'm trying to find out if there's a way to do this with the API calls here: http://idangero.us/swiper/api/#layout but the attempts I'm making haven't been successful.

The Website Here's a live version of this site (half way down you'll see the horizontal images that can slide by using your mouse to drag: Demo Site

NOTE This might look just fine in the snippet editor, so if it looks good here please test on demo site and you'll see the issue I'm running into.

THANK YOU in advance for taking a look at this for me. I appreciate it.

The Code

jQuery(document).ready(function($) {
	// SWIPER FOR CAROUSEL
	var mySwiper2 = new Swiper ('.swiper-container-2', {
      // Optional parameters
	  init: true,
      direction: 'horizontal',
      loop: true,
	  preloadImages: true
    })
});
.swiper-container-2 {
    width: 100%;
}
.swiper-slide {
	width: auto!important;
	margin: 0 15px;
}
.swiper-slide img {
	max-height: 600px;
}
.swiper-container-2:hover {
    cursor: url(/wp-content/uploads/curse-custom-v2.png), auto;
}
.swiper-slide div {
	text-align: center;
	font-family: 'gt_sectra_fineregular_italic';
	display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container-2">

<!-- Additional required wrapper -->
<div class="swiper-wrapper">

<!-- Slides -->
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-1.jpg" />
<div>This is about this image</div>
</div>
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-2.jpg" />
<div>Some information about this one too</div>
</div>
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-1.jpg" />
<div>Wow this is amazing stuff</div>
</div>
</div>
</div>

Upvotes: 4

Views: 10982

Answers (2)

Birdie Golden
Birdie Golden

Reputation: 571

Remove the !important on:

.swiper-slide {
    width: auto;
}

Add the "slidesPerView" parameter to the JS:

var mySwiper2 = new Swiper ('.swiper-container-2', {
  // Optional parameters
  init: true,
  direction: 'horizontal',
  loop: true,
  preloadImages: true,

  /* THIS PAL RIGHT HERE*/ 
  slidesPerView: 'auto'
})

Upvotes: 2

Oleg Imanilov
Oleg Imanilov

Reputation: 2751

The main reason of your glitch is .swiper-slide { width: auto!important;

Carousel calculates positions by image width - so sometimes virtually it is far left of the screen.

Upvotes: 1

Related Questions