How to resolve Swiperjs Fade Effect loop bug - javascript

I am using swiper js according to their API. There are a total of 5 slides, but an error occurs without going directly from the 4th slide to the 5th slide. The 4th slide is divided into 2 times and the 5th slide is not shown and it goes to the 1st slide.
<div class= "swiper-wrapper">
<div class="swiper-slide">
<img src="./images/img01-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-4.png" alt="">
</div>
</div>
const slideOption1 = {
effect: 'fade',
speed: 400,
slidesPerView: 'auto',
autoplay: {
delay: 400,
disableOnInteraction: false,
},
// loop:true,
loopedSlides: 5,
loopAdditionalSlides: 5,
};
i tried to
s1.on('slideChange', function() {
if(s1.realIndex == 3) {
s1.slideToLoop(5,400)
}
})

Related

Swiper slider, how to reduce the width of the scrollbar

JavaScript
const projectsSwiper = new Swiper(".projects__swiper-start", {
speed: 1000,
slidesPerView: 3,
navigation: {
nextEl: ".projects__swiper-next",
prevEl: ".projects__swiper-prev",
},
watchOverFlow: true,
simulateTouch: true,
spaceBetween: 19,
scrollbar: {
el: ".projects__swiper-scroll",
draggable: true,
dragSize: 80,
},
});
HTML
<div class="projects__swiper-start swiper">
<div class="projects__swiper swiper-wrapper">
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-1.jpg" alt="slide-1" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-2.jpg" alt="slide-2" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-3.jpg" alt="slide-3" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-4.jpg" alt="slide-4" />
</div>
</div>
</div>
</div>
Now I have scrolled in full width, but I need to reduce it to 300px and place it in the center, as I found the slider to reduce, but with the width of the scroll, there is a problem.
Thank you very much in advance!
dragSize - Size of scrollbar draggable element in px.
No API option to control the width of swiper-scrollbar (The wrapper). If you change this by custom CSS you destroy the way the scrollbar works.
/* will not work as it should */
.swiper-horizontal .swiper-scrollbar{
width: 50%!important;
}
You should open Github Feature Req related to this idea:
https://github.com/nolimits4web/swiper/issues

Why slick slider swipe slides forward, and backward?

I have a slider
<div class="my-projects-slider" id="js-my-projects-slider">
<div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/7.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/8.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/9.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
And the js code
$('#js-my-projects-slider').slick({
dots: false,
slidesToShow: 8,
slidesToScroll: 2,
arrows: true,
responsive: [{
breakpoint: 1600,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 1400,
settings: {
slidesToShow: 6
}
},
{
breakpoint: 1200,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 3,
arrows: false
}
}
]
});
I mean to scroll just 2 slides when i click arrow.
But when i press first time is swipe 2 slides forward, second time - 2 slides forward, and when i click 3 time - swipe some slides backward.
What is the reason?
This is the site [enter link description here]my-site1
The slider under the russia map
Thansk
I understand whats happend.
I have 13 slides and scrolling by 2. This is the reason.
I change slides to 14 and it works.

Move Slick Slider gallery when mouse is on left or right side of page

I am trying to get my gallery to move left when the mouse is on the left side of the page and move right when it is on the right side of the page.
Here is the JSFiddle. I tried to use the hover function but it doesn't work. Mouseover seems to only work when you move the mouse over either on left or right side of the page and mousemove only seems to work when you move the mouse again. I would like it to still move (left or right) when the mouse is stationary (in either left or right side of page), or moved.
$('.carousel-one').on('mouseover', function(e) {
"use strict";
var mouseSide;
if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
$('.carousel-one').slickPrev();
} else {
$('.carousel-one').slickNext();
}
});
$('.carousel-one').slick({
arrows: true,
infinite: true,
speed: 500,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>
Set pauseOnHover: false,. Hope this helps!
$('.carousel-one').on('mouseover', function(e) {
"use strict";
var mouseSide;
if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
$('.carousel-one').slickPrev();
} else {
$('.carousel-one').slickNext();
}
});
$('.carousel-one').slick({
arrows: true,
infinite: true,
pauseOnHover: false,
speed: 500,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>

Thumbnail slider not working

I got a Thumbnail slider but that does not work right, When i click a particular thumb image, the main images is repeated is the same image appears.
Anyone can help me to solve this
Relevant URL: http://jsfiddle.net/danoftheman/C3Sr3/1/
$(document).ready(function() {
$(function() {
// If there are gallery thumbs on the page
if ($('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = $('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 4;
// Put slider into variable to use public functions
var gallerySlider = $('#gallery').bxSlider({
controls: false,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function(currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function(e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
$('#gallery-thumbs').find('.thumb').click(function() {
// Remove the active class from all thumbs
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
$(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = $('#gallery-thumbs').gbxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false,
slideWidth: 200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10
});
}
});
});
.gallery-container {
width: 350px;
height: 300px;
}
.gallery-thumbs-container {
width: 350px;
height: 300px;
}
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" />
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
Update this line
gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6);
to
gallerySlider.goToSlide($(this).closest('.thumb-item').index() );
http://jsfiddle.net/C3Sr3/23/

jCarouselLite not working on this page

I am using jCarouselLite on this page
Here is the code
//jcarousel 1.0.1
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:7,start:0,scroll:2,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
jQuery(document).ready(function($) {
$(".slider").jCarouselLite({
btnNext: null,
btnPrev: null,
visible: 7,
scroll: 2,
vertical: false,
circular: true,
itemFallbackDimension: 150,
start: 0,
auto: 4000,
speed: 1000
});
});
On that way it's working some times with showing 7 images and sometimes it's showing only 5 images and sometimes no images and stopped working.
Please help me to fix it.
Thanks
can you post your html, please?
normally you can slide with the jcarousel just by preparing the html on the right way
like this:
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="pic/slide1.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="pic/slide2.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="pic/slide3.jpg" alt="slide" />
</li>
</ul> </div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
</div>
<!-- END #pictureslide -->
in Javascript you only have to write this (the id is at the ul):
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 2
....
});

Categories