I have multiple Slick Sliders on one page. Each slider has a thumbnail Nav. The problem is the sliders uses the previous ones current position rather than starting on the first thumbnail.
I'm guessing I need a way to dynamically add an id so they don't affect each other. (My JS knowledge is very basic)
$('.slider-products').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
var windowWidth = $(window).width();
if(windowWidth <= 800) {
$('.slider-nav').slick({
vertical: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-products',
arrow: false,
focusOnSelect: true
});
}
else {
$('.slider-nav').slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-products',
focusOnSelect: true
});
}
Use the .each method to bypass all the sliders.
Add a numbered class for each pair of sliders by the .addClass method.
Use the responsive option to change the settings depending on the width of the screen.
Please check the result: https://codepen.io/glebkema/pen/bWRZzB
var numSlick = 0;
$('.slider-products').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrows: false,
asNavFor: '.slider-nav.slider-' + numSlick,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
});
});
numSlick = 0;
$('.slider-nav').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrow: false,
asNavFor: '.slider-products.slider-' + numSlick,
focusOnSelect: true,
slidesToScroll: 1,
slidesToShow: 4,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 3,
}
}
]
});
});
.slick-arrow {
display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
background: #c69;
border: 2px solid #fff;
color: #fff;
font-size: 36px;
font-weight: bold;
outline: none; /* prevent the appearance of a tiny gray contour */
padding: 18px 0;
text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
cursor: pointer;
opacity: .7;
}
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
Related
This question was migrated from Webmasters Stack Exchange because it can be answered on Stack Overflow.
Migrated 22 hours ago.
I'm trying to create a gallery slider using slick slider js library. A basic mobile responsive gallery carousel with a progress bar. Everything is running however I'm having trouble with some styling. I want the effect of the gallery center image to be raised above the other 2 (half) slides in the background. For some reason- I can't achieve the center padding effect and the slides are jumping a little when its on autoplay. The widths are also messed up responsively. Im not sure why none of my styles are working correctly. I attached my html code(without the actual image links) and how I initialized it in my js. I also attached some css that I had implemented (I had originally fully styled it- but I took out the styles because it really got messy).
Any advice how to proceed will be greatly appreciated
//Initialize slick slider
$(document).ready(function() {
$(".coverflow").slick({
dots: false,
arrows: true,
infinite: true,
centerMode: true,
centerPadding: '150px',
variableWidth: true,
focusOnSelect: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 2500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}, ],
});
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center .slide-container').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});
//progress bar for slick slider
$(document).ready(function() {
var $slider = $('.coverflow');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
});
.progress {
max-width: 800px!important;
margin-right: auto;
margin-left: auto;
display: block;
width: 75%;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #5B5B5B;
background-image: linear-gradient(to right, #FA5927, #FA5927);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
margin-top: 55px;
}
.slide-number {
color: #FA5927;
font-family: 'PT SANS';
font-size: var(--wp--preset--font-size--medium)!important;
padding: 10px;
}
.slide-container {
margin-right: 50px;
margin-left: 50px;
}
#media only screen and (max-width:880px) {
/*--gallery slider--*/
.coverflow img {
width: 70%;
margin: auto;
}
}
#media only screen and (max-width:787px) {
/*--gallery slider--*/
.coverflow img {
width: 50%;
margin: auto;
}
}
#media only screen and (max-width:414px) {
/*--gallery slider--*/
.coverflow img {
width: 35%;
margin: auto;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<section class="coverflow">
<div class="slide-container">
<span class="slide-number">01</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">02</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">03</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">04</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">05</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">06</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
</section>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</span>
</div>
<!-- end content -->
</div>
To create a standard e-commerce slideshow template I would like to have two sliders with two asNavFor parameters values for slider to slider.
Link to codepen.io
As Code:
<div class="slider">
<div class="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><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
<div><h3>9</h3></div>
<div><h3>10</h3></div>
</div>
<div class="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><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
<div><h3>9</h3></div>
<div><h3>10</h3></div>
</div>
</div>
With CSS:
body {
background: gray;
}
.slider {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.slider .action{
display:block;
margin:100px auto;
width:100%;
text-align:center;
}
.slider .action a {
display:inline-block;
padding:5px 10px;
background:#f30;
color:#fff;
text-decoration:none;
}
.slider .action a:hover{
background:#000;
}
and JS:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: true,
dots: false,
respondTo:'min',
asNavFor: '.slider-nav',
cssEase:'linear'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 4,
rows: 2,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: false,
dots: false,
respondTo:'min',
asNavFor: '.slider-for',
cssEase:'linear'
});
And slider with one row change slide in slider with two rows but when you click for any slide in slider with two rows you won't get the slide number you clicked on.
Works as wanted when $('.slider-nav') there is only one row, you can change rows: 2 to rows: 1 to $('.slider-nav').
How to get the same slide for $('.slider-for') when you click on it in $('.slider-nav')?
I think this is a common issue with Slick Slider: https://github.com/kenwheeler/slick/issues/1206
I was looking to do the same thing and I think I found a solution with some help from that github link
https://jsfiddle.net/sn3b5pcu/
$('.slider-for').slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: true,
dots: false,
respondTo:'min',
asNavFor: '.slider-nav',
cssEase:'linear'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 4,
rows: 2,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: false,
dots: false,
respondTo:'min',
asNavFor: '.slider-for',
cssEase:'linear'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click", function(e){
if( !killit ) {
e.stopPropagation();
var idx = $(this).data("thumb");
$parent.slick("goTo", idx-1);
}
});
$nav
.on("beforeChange", function() {
killit = true;
}).on("afterChange", function() {
killit = false;
});
I am using slick slider js to make a two rows with an expanding grid. I started with an example I found on w3 schools but I can't get the box to expand to the whole container and if I can by changing the length of the width (i.e. 1000px) it shows up behind the icons. I am trying to get the icons to go down when I click an icon and the box opens but I am sure at this point on how to do it.
HTML:
<div class="expanding-grid">
<div class="container container-sm">
<div class="carousel">
<div class="links">
<li>
<a><img src="/icons/Acting.png" style="width: 200px; text-align:center;" onclick="openTab('b1');">
<p style="text-align:center; margin-top:5px">Acting</p></a>
</li>
<div id="b1" class="containerTab" >
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<!-- other icons -->
</div>
</div>
</div>
CSS
.containerTab {
padding: 20px;
color: white;
background-color: grey;
}
.containerTab p {
width: 100%;
}
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
expanding box JS:
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
slick slider JS
$(document).ready(function(){
$('.carousel').slick({
rows: 2,
slidesToShow: 5,
slidesToScroll: 3,
mobileFirst:true,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 1040,
settings: {
slidesToShow: 5,
slidesToScroll: 3,
infinite: true,
dots: true,
}
}, {
breakpoint: 1020,
settings: {
slidesToShow: 4,
slidesToScroll: 3,
infinite: true,
dots: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 3,
}
}]
});
});
This is how it looks without styling
and if I change the width length in the containerTab
Trying to use ScrollMagic with fullpage.js - I have searched and only found that it is suggested to use scrollBar: true or autoScrolling: false to enable jQuery positioning or offsets, however, upon responsive (which turns the page into a normal scrolling site), the position still remains at that (0,0) position.
This seems a bit confusing, as in my mind, if I say:
autoScrolling: true,
but
responsiveWidth: 991
and, via the documentation:
A normal scroll (autoScrolling:false) will be used under the defined width in pixels ... For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
So why wouldn't my $('.fp-section').position() work after checking for Responsive in afterResponsive(isResponsive)?
example:
Codepen
jQuery('#main').fullpage({
//Navigation
lockAnchors: false,
navigation: true,
navigationPosition: 'left',
showActiveTooltip: false,
slidesNavigation: false,
//Scrolling
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: false,
fitToSectionDelay: null,
scrollBar: false,
easingcss3: 'ease',
scrollHorizontally: true,
offsetSections: false,
resetSliders: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: 'top',
dragAndMove: 'fingersonly',
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: false,
//Design
sectionsColor: ['#ccc', 'black', '#ccc'],
responsiveWidth: 991,
//Custom selectors
sectionSelector: '.section',
lazyLoading: true,
afterResponsive: function(isResponsive) {
var scene = [];
var parallaxTween = [];
var box = jQuery('.moveme');
var parallax = new TimelineMax();
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: .5,
duration: window.innerHeight + 50
}
});
for (var i = 0; i < box.length; i++) {
var yPer = -100;
var yEnd = 100;
//reset scene on responsive
if (scene[i])
scene[i].destroy(true);
parallaxTween[i] = null;
scene[i] = null;
console.log(box.closest('.section').position());
parallaxTween[i] = parallax.fromTo(jQuery('.container').eq(i), 1, {
yPercent: yPer
}, {
yPercent: yEnd,
ease: Linear.easeNone
}, 0);
scene[i] = new ScrollMagic.Scene({
triggerElement: jQuery(box[i]).closest('.section'),
})
.setTween(parallaxTween[i])
.addIndicators()
.addTo(controller);
}
}
});
.section {
position: relative;
}
.container {
position: absolute;
background: blue;
color: white;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveme {
margin: 0;
line-height: 100px;
text-align: center;
}
<main class="site-main fullpage-wrapper" id="main" role="main" style="height: 100%; position: relative; transform: translate3d(0px, 0px, 0px); transition: none;">
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/animation.gsap.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/debug.addIndicators.js'></script>
I'm using slides.js in a website, and the page so far is supposed to look like this:
But about 1/4 times the page loads, it instead looks like this:
Or this:
Here's my jQuery:
$(document).ready(function() {
$('#slides').slidesjs({
width: 860,
height: 250,
pagination: false,
generatePagination: false,
navigation: {
active: false
},
play: {
active: false,
effect: "fade",
interval: 7000,
auto: true,
pauseOnHover: false
},
effect: {
fade: {
speed: 2000
}
}
});
});
And the HTML is just the slides.js standard:
<style>
#slides {
display: none;
}
.container {
margin: 0 auto;
width: 860px;
}
</style>
<div class="container">
<div id="slides">
<img />
</div>
</div>
This is unfathomable annoying. It would be nice if this problem would at least be consistent.