I am trying to create the ability for users to see the product rollover image on click the arrows on image.
Basically image will toggle on click of the side arrows on image.
Is their any js library or script available that allows to achieve this functionality ?
Thankyou
It seems like you are looking for swiper.js.
The setup is really easy:
include this in the head of your document
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
than add your images to the swiper-slide elements
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Image 1</div>
<div class="swiper-slide">Image 2</div>
<div class="swiper-slide">Image 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
set the desired size
.swiper-container {
width: 600px;
height: 300px;
}
and finally initialize it within a script tag
<script>
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
all of this is really well explained in the guide
Related
How to activate Swiper Slider on dynamically loaded HTML which is loaded via AJAX after submitting the form?
window.onload = function() {
const swiper = new Swiper('.worksSlider', {
// Optional parameters
loop: true,
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#7/swiper-bundle.min.css" rel="stylesheet"/>
<div class="worksSlider swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
</div>
</div>
</div>
this is the entire code , please see what is the problem here, i have done everything given on the swiper js website. i have added the style links in the header and the required scripts in the body
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
I'm using Swiper mobile touch slider (v. 4.0.5). I'm having a problem that I think is related to the slider initializing before images are loaded, which causes it not to function.
The only solution I've found is to call update() after a delay.
setTimeout(function() {
mySwiper.update();
}, 500);
But I don't like the half-second delay. If the slider must be reinitialized after images are loaded, I would rather that it happen efficiently as soon as the images are ready.
Documentation lists a updateOnImagesReady parameter which, when set to true, should reinitialize the slider after all of its images are loaded. But it doesn't seem to help.
updateOnImagesReady
When enabled Swiper will be reinitialized after all inner images ( tags) are loaded.
Required preloadImages: true
Under "events", the documentation lists an imagesReady event. I thought I could use this event to call update().
imagesReady
Event will be fired right after all inner images are loaded.
updateOnImagesReady should be also enabled
In my code below, the init event seems to fire, but I can't get imagesReady to fire.
Why is the imagesReady event not firing?
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this doesn't work
}
}
});
body {
margin: 0;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Possibly related:
Swiper slider not working unless page is resized
Swiper slider space between not showing on load
iDangero Swiper only work when screen is resized
swiper doesn't work on page load
Edit:
The initialization problem seems to go away if I remove the effect:'fade' parameter. See slideChangeStart event does not fire when I swipe. But I want to use the "fade" effect. And I'd still like to know how to get the events to fire.
This issue seems to be fixed in version 4.0.7.
I'm not exactly sure why, but it might be due to changes on line 5958.
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this works now, too!
}
}
});
body {
margin: 0;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I was having an issue where the imagesReady event wasn't firing for me, but it seems like it was because I was loading all the images as background images instead of inline image tags.
I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>
(Those {{}} thingis are right now just placeholders)
Everything is loaded and rendered fine, but as soon as I try to swipe, I get
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
Any hints?
Instead of this:
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
Try separating out your DIV's, with the swiper container on the outside:
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).
<!-- error code use logos twice -->
<div class="swiper-container logos">
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
var mySwiper = new Swiper('.logos', {
speed: 400
});
Throw this error:
Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).
I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.
Seems like Swiper 3.x and Require with almond have some problems at the moment.
I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows.
For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.
The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.
Eg: HTML
<div id="logos" class="swiper-container"> <!-- This line is edited -->
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
Eg: JavaScript
//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', {
speed: 400
});
This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems
https://swiperjs.com/get-started
I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it.
I have the opacity of all the captions set to 0 and then add a class named "animate-me" (with jQuery) to the captions. The first one fades in and then all the others are constantly displayed.
Here's what I have so far on jsbin... http://jsbin.com/OGehUKEh/3/edit
You need to use Owl Carousel callbacks. I found the callbacks you need.
$("#owl-example").owlCarousel({
beforeMove: function(){
// BEFORE going to the next slide (hide captions)
},
afterMove: function(){
// AFTER going to next slide (show captions)
}
})
I've successfully done this using jCapSlide (http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/).
Here's the HTML:
<div class="owl-carousel">
<div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
<img alt="text" src="imagelocation"><!-- This is my image -->
<div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
<div class="ic_caption">
<h3>TITLE To display</h3>
<p class="ic_text">Caption</p>
</div>
</div>
<div class="item" id="id_b">
<img alt="text" src="another image">
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>Title 2</h3>
<p class="ic_text">More Text</p>
</div>
</div>
<!-- More pictures in the same fashion as above -->
</div>
Include the CSS in the HEAD
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">
Include the JScript just before the
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>
<script src="/js/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});
$("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
$("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
</script>
jCapSlide is very flexible, and you can mess with the CSS and JS to get the exact colours/animation you want.
Debbie