I have a slick slider with thumbnails as the dot navigation but the thumbs are coming up as undefined. Here is my code. Any help is greatly appreciated!
<section class="slider">
<div data-thumb="images/3white.svg?$staticlink$"><img src="images/cutaway3.png?$staticlink$"></div>
<div data-thumb="images/4white.svg?$staticlink$"><img src="images/cutaway4.png?$staticlink$"></div>
<div data-thumb="images/5white.svg?$staticlink$"><img src="images/cutaway5.png?$staticlink$"></div>
<div data-thumb="images/6white.svg?$staticlink$"><img src="images/cutaway6.png?$staticlink$"></div>
<div data-thumb="images/7white.svg?$staticlink$"><img src="images/cutaway7.png?$staticlink$"></div>
<div data-thumb="images/8gray.svg?$staticlink$"><img src="images/cutaway8.png?$staticlink$"></div>
<div data-thumb="images/9gray.svg?$staticlink$"><img src="images/cutaway9.png?$staticlink$"></div>
<div data-thumb="images/Pgray.svg?$staticlink$"><img src="images/cutawayP.png?$staticlink$"></div>
</section>
<script type="text/javascript">
$(".slider").slick({
autoplay: false,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
Here is an example which may help you:
$('.slider').slick({
autoplay: false,
dots: true,
customPaging: function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img width="20" src="' + thumb + '"></a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<section class="slider">
<div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
</section>
Related
How to auto play this slider whan i add autoplay is true in javascript then slider is not working how i resolve this.
jQuery(document).ready(function($) {
$('.banner_slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumbnail_slider'
});
$('.thumbnail_slider').slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: '.banner_slider',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false,
arrows: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
*{
box-sizing: border-box;
}
img {
max-width:100%;
}
.slider_wrap{
position:relative;
}
.thumbnail_slider_area {
position:absolute;
left:0;
bottom:0;
width:100%;
z-index:1;
}
.thumbnail_slider{
border:1px solid #000;
padding:1px;
}
.thumbnail_slider .col{
padding:5px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick.css" />
<script type="text/javascript" src="slick.js"></script>
[for slick css and js download link][1]
How to auto play this slider whan i add autoplay is true in javascript then slider is not working how i resolve this.
<div class="slider_wrap">
<div class="banner_slider">
<img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />
</div>
<div class="row thumbnail_slider_area">
<div class="container">
<div class="row thumbnail_slider">
<div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
How to auto play this slider whan i add autoplay is true in javascript then slider is not working how i resolve this.
Working example:
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
img {
max-width:100%;
}
.slider_wrap{
position:relative;
}
.thumbnail_slider_area {
position:absolute;
left:0;
bottom:0;
width:100%;
z-index:1;
}
.thumbnail_slider{
border:1px solid #000;
padding:1px;
}
.thumbnail_slider .col{
padding:5px;
}
</style>
</head>
<body>
<div class="saved"></div>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>
<div class="slider_wrap">
<div class="banner_slider">
<img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />
</div>
<div class="row thumbnail_slider_area">
<div class="container">
<div class="row thumbnail_slider">
<div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('.banner_slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumbnail_slider'
});
$('.thumbnail_slider').slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: '.banner_slider',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
//autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false,
arrows: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
</body>
</html>
When I try to implement this Slick slider I get only a list of the numbers like in the image:
https://codepen.io/AntFArm/pen/JNEgJE
html code:
<div class="main">
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
go to slide 3
go to slide 4
go to slide 5
</div>
</div>
js code:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
I get this:
I have the exact same code as on the codepen.io site..
Also I don't have any errors.
What am I doing wrong? THanks in advance.
My script includes:
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
I load the necessary files in head:
Javascript is run as it is seen. Seeing as your code doesn't work I have to assume that you are adding your script in the <head> or at least before where you define <div class="main">. The rendering engine has not yet rendered your relevant slider elements so it cannot find them and does... nothing.
Either wrap your script in an onload (or a $(function() {/* your code here */})) or put your script at the bottom of your page
Seems like slick default styles are not applied double check you have them and the path to them is correct.
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
In your codepen, slick is not loaded so you get the default DOM display of your divs (one under each other). There must be something wrong with your loading of the scripts.
I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>
You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>
When I am trying to use owl carousel's animate In and out feature and am showing 2 items, the transition animation is not working.
This is the configuration I am trying: (items:2)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:2,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
with the following configuration animation it is working fine:(items:1)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
How can I achieve multiple items (specifically 2 items) animation together using owl Carousel? Is this possible with owl carousel?
Try this:
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>
I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>
html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}