I need slider on web-page and i get slick-slider. I wanted use slider center-mode but a little change this slider. I would that central element of that slider had bigger size than other elements of the slider.
But i can't to detetmine what class use central element, i try applied class "slick-center", "slick-current" but this attempts don't work.
This is my problem
$('.slidy').slick({
centerMode: true,
centerPadding: '10px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}}
]
});
$(document).ready(
function() {
var next = document.querySelector('.slick-next');
next.onclick = function() {
document.querySelector('.slick-center').style.border ="2px solid red";
document.querySelector('.slick-center').style.transform="scale(1.2, 1.2)"
}
}
)
.slick-prev:after {
content: ">";
color: red;
font-size: 30px;
}
.slick-next:before {
content: "<";
color: red;
font-size: 30px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<div class="slidy">
<div> peace of one </div>
<div> peace of two </div>
<div> peace of tree </div>
<div> peace of four </div>
<div> peace of five </div>
<div> peace of six </div>
</div>
If you advise how write sliders by himself it will be cool)
$('.slidy').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: "35px",
speed: 500
});
Your can add padding with centerPadding : ""; option also
you can apply your own CSS for center one this way:
.slidy .slick-center{}
Related
I have created a slider with some image items that is infinitely scrolling with autoplay.
I've disabled pause on hover and i want to prevent every single event that would trigger it to stop.
One specific thing with that is when I'm clicking on it several times, then it stops and i can drag it. I don't want this behaviour and i thing I've done everything to prevent it. I want it to be unstoppable
Those are mine Slick Carousel setting:
$(document).ready(() => {
$('.clients-slider').slick({
infinite: false,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
speed: 5000,
draggable: false,
swipe: false,
swipeToSlide: false,
centerMode: false,
arrows: false,
dots: false,
focusOnSelect: false,
accessibility: false,
touchMove: false,
pauseOnHover: false,
pauseOnFocus: false,
pauseOnSwipe: false,
cssEase: 'linear',
responsive: [
{
breakpoint: 1366,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}
],
});
});
Here is my html/php code (I'm doing it in wordpress):
<section class="clients" id="clients">
<h2 class="offer-head" style="max-width: 1300px;margin-left:auto;margin-right:auto;"><?php echo $partnerzy; ?></h2>
<div class="clients-slider" pause-on-hover="false" draggable="false">
<?php if( have_rows('slajder_partnerzy') ): ?>
<?php while( have_rows('slajder_partnerzy') ): the_row(); ?>
<img class="clients-slide-single" src="<?php echo get_sub_field('partner_logo'); ?>" alt="logo-client" />
<?php endwhile ?>
<?php endif ?>
</div>
Can anyone relate on this? Of course I'm properly importing jquery and slick carousel library.
This one seems to work, with infinite:true
$(document).ready(() => {
$('.clients-slider').slick({
infinite: true,
autoplaySpeed: 1000,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
speed: 1000,
delay: 1000,
draggable: false,
swipe: false,
swipeToSlide: false,
centerMode: false,
arrows: false,
dots: false,
focusOnSelect: false,
accessibility: false,
touchMove: false,
pauseOnHover: false,
pauseOnFocus: false,
pauseOnSwipe: false,
cssEase: 'linear',
responsive: [{
breakpoint: 1366,
settings: {
slidesToShow: 1
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
],
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
Here is my html/php code (I'm doing it in wordpress):
<section class="clients" id="clients">
<h2 class="offer-head" style="max-width: 1300px;margin-left:auto;margin-right:auto;">
<?php echo $partnerzy; ?>
</h2>
<div class="clients-slider" pause-on-hover="false" draggable="false">
<?php if( have_rows('slajder_partnerzy') ): ?>
<?php while( have_rows('slajder_partnerzy') ): the_row(); ?>
<img class="clients-slide-single" src="https://picsum.photos/id/237/200/200" alt="logo-client" />
<img class="clients-slide-single" src="https://picsum.photos/200" alt="logo-client" />
<img class="clients-slide-single" src="https://picsum.photos/200/200" alt="logo-client" />
<?php endwhile ?>
<?php endif ?>
</div>
I'm building a property website HERE that has a section for selecting property by project. I use slick to property list and also the filters as shown in the image below.
If the first time I try to click the filter based on the project it's still normal. But when the screen is resized and in mobile view, this filter doesn't work.
Can anyone here help me deal with this bug?
this is my slick and filter js code:
$(document).ready(function(){
$('.slider__filter--item').on('click', function(){
let filterMenu = $(this).data('filter');
console.log(filterMenu);
console.log('.slider__filter--item[data-filter="' + filterMenu + '"]')
console.log('.slider-product#' + filterMenu)
$('.slider__filter--item').removeClass('active');
$('.slider-product').removeClass('active');
$('.slider__filter--item[data-filter="' + filterMenu + '"]').addClass('active');
$('.slider-product#' + filterMenu).addClass('active')
});
$('.slider__filter').slick({
autoplay:false,
dots: false,
arrows:false,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
]
});
$('.slider-product').slick({
autoplay:false,
dots: false,
arrows:true,
prevArrow: '<button class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
nextArrow: '<button class="slick-next"><i class="fas fa-chevron-right"></i></button>',
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 575,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
]
});
});
HTML
#if (sizeof($data['PROPERTY']) > 0)
<section class="sections property-recommendation" id="section-property">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="font-size-40 section__title section__title--white">
{{ $data['LANDINGPAGE_PRODUCT_TITLE'] ?? 'title goes here' }}
</h2>
</div>
<div class="col-12">
<div class="tabs-filter">
<div class="mb-3 slider__filter">
#isset ($data['PROPERTY']['HOT'])
<div class="slider__filter--item active" data-filter="type-hot">
<a class="slider__filter--link">Hot</a>
</div>
#endisset
#foreach ($data['PROPERTY']['OTHERS'] as $key => $item)
<div class="slider__filter--item" data-filter="type-{{ preg_replace('/\s+/', '-', $key) }}">
<a class="slider__filter--link">{{ $key }}</a>
</div>
#endforeach
</div>
</div>
#isset ($data['PROPERTY']['HOT'])
<div class="slider-product active" id="type-hot">
#foreach ($data['PROPERTY']['HOT'] as $item)
#include('components.image.property', ['item' => $item])
#endforeach
</div>
#endisset
#foreach ($data['PROPERTY']['OTHERS'] as $key => $items)
<div class="slider-product" id="type-{{ preg_replace('/\s+/', '-', $key) }}">
#foreach ($items as $item)
#include('components.image.property', ['item' => $item])
#endforeach
</div>
#endforeach
</div>
</div>
</div>
</section>
#endif
CSS
.tabs-filter{
padding: 0 17%;
margin-bottom: 40px;
#media screen and (max-width:575px){
padding: 0 10%;
}
.slider__filter{
&--item{
text-align: center;
cursor: pointer;
padding: 10px 0;
&.active{
background-color: $orange;
border-radius: 14px;
.slider__filter--link{
opacity: 1;
}
}
}
&--link{
text-decoration: none;
outline: none;
color: #fff;
opacity: .5;
}
}
}
.slider-product{
display: block;
height: 0;
overflow: hidden;
position: unset;
&.active{
height: auto;
}
}
I've made a simple slider using Ken Wheeler's slick-slider (https://kenwheeler.github.io/slick/), and I've added an image display function that switches another image below the slider (not the actual slider image) to correspond with the slider. I'd like this for a product carousel that will have a banner image that corresponds with the product in the slick-slider. The below code is functional, but was wondering if there's a cleaner way achieve this. I got hung-up and perhaps long-winded when checking for the inactive slides, and hiding the corresponding images. Thanks.
$(document).ready(function () {
$('.my-slide-wrapper').slick({
dots: true,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
$("button.slick-arrow").click(function () {
if ($("#slick-slide00").hasClass("slick-active") && (!$("#slick-slide01 #slick-slide02").hasClass("slick-active"))) {
$("#myImage00").addClass("im-showing"),
$("#myImage01").removeClass("im-showing"),
$("#myImage02").removeClass("im-showing");
}
else if ($("#slick-slide01").hasClass("slick-active") && (!$("#slick-slide02 #slick-slide00").hasClass("slick-active"))) {
$("#myImage01").addClass("im-showing"),
$("#myImage02").removeClass("im-showing"),
$("#myImage00").removeClass("im-showing");
}
else {
$("#myImage02").addClass("im-showing"),
$("#myImage01").removeClass("im-showing"),
$("#myImage00").removeClass("im-showing");
}
});
});
Working version on CodePen: https://codepen.io/jakeos/pen/povXPyd
You should check out "Slider Syncing" in the documentation. It does exactly that. In your case, you need to setup both as sliders and use your top slider as the navigation for the bottom one.
I changed your HTML a bit to make it easier to understand
Here's a working fiddle.
HTML
<!-- This is just a slider using Ken Wheeler's slick-slider (https://kenwheeler.github.io/slick/), and I've added an image display function that switches the image below (the slider) to correspond with the slider. It will ultimately be for a product carousel that will have a banner image that corresponds with the product in the slider. -->
<body>
<div class="my-slide-container">
<div id="top-slider" class="my-slide-wrapper">
<img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
<img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
</div>
<div id="bottom-slider" class="my-slide-wrapper">
<img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Image+1">
<img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Image+2">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
</div>
</div>
</body>
CSS
.my-slide-container {
margin: 30px;
}
.my-slide-wrapper,
.my-image-wrapper {
margin: 0 auto;
max-width: 300px;
}
img {
max-width: 300px;
width: 100%;
}
.slick-dots li {
margin: 0;
}
.slick-next::before,
.slick-prev::before {
color: #000;
opacity: 1;
}
.my-image {
visibility: hidden;
position: absolute;
}
#myImage00 {
visibility: visible;
}
.im-hiding {
visibility: hidden;
}
.im-showing {
visibility: visible;
}
JS
$(document).ready(function () {
$('#top-slider').slick({
asNavFor: '#bottom-slider',
dots: true,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
$('#bottom-slider').slick({
arrows: false,
dots: false,
draggable: false,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
});
I'm learning JavaScript and I've got a simple problem that I don't know how to deal with it.
What I want to achieve is to 'hold' or 'freeze' a slide disabling all kind of possible navigation (keyboard arrows, click and drag, touch interaction) by only clicking a button when the user desires. By clicking this button the user enables or disables the navigation controls with the slider.
So, once clicked this button the user can't navigate on the slides. The user has to click again on the button to enable the controls.
This is what I got so far:
jQuery(document).ready(function($) {
$('.slider').slick({
infinite: true,
fade: false,
centerMode: true,
variableWidth: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
autoplay: false
});
});
var hold = false;
$('#hold').click(function() {
$(this).attr("class", "active disabled");
if (hold == false) {
$('.slider').slick({
accesibility: false,
draggable: false,
swipe: false,
touchMove: false
});
hold = true;
} else {
$('.slider').slick({
accesibility: true,
draggable: true,
swipe: true,
touchMove: true
});
hold = false;
$("#hold").attr("class", "disabled");
}
});
.card {
margin: 10px;
padding: 50px 100px;
background-color: silver;
color: white;
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" />
<div class="slider">
<h1 class="card">1</h1>
<h1 class="card">2</h1>
<h1 class="card">3</h1>
<h1 class="card">4</h1>
<h1 class="card">5</h1>
</div>
<button id="hold" class="disabled">HOLD</button>
What could I've been missing?
Your help is really appreciated!
Use slickSetOption to set an individual value live. See the Methods section at http://kenwheeler.github.io/slick/
Below is a working example.
var slider = $("#slider");
slider.slick({
arrows: false,
centerMode: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true
});
var hold = false;
$("#hold").click(function() {
slider.slick("slickSetOption", "accessibility", hold);
slider.slick("slickSetOption", "draggable", hold);
slider.slick("slickSetOption", "swipe", hold);
slider.slick("slickSetOption", "touchMove", hold);
hold = !hold;
$(this).toggleClass("disabled");
});
h1 {
background-color: silver;
color: white;
margin: 10px;
padding: 50px 100px;
}
.disabled {
color: red;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
</div>
<button id="hold">HOLD</button>
I've been toying around with Slick carousel for a fair few hours, and really can't get my head around how to implement the "center mode" that's on the Slick website: http://kenwheeler.github.io/slick/
It looks something like this:
I've got the current code in place, but it's still not giving me what I want:
< link rel = "stylesheet"
type = "text/css"
href = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" >
< script type = "text/javascript"
src = "http://code.jquery.com/jquery-1.11.0.min.js" > < /script>
<link rel="stylesheet" type="text/css
" href="
http: //kenwheeler.github.io/slick/css/style.css">
< script type = "text/javascript"
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<section id="
features " class="
blue ">
<div class="
center ">
<div class="
content ">
<div class="
single - item ">
<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>
</div>
</div>
</section>
If anyone has any suggestions as to why this might not be working, I'd really appreciate the help.
Thanks.
I think this might be appropriate answer for slick centre mode
<html>
<head>
<meta charset="utf-8">
<title>Maganti IT Solution</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<style>
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slide-h3{
margin: 10% 0 10% 0;
padding: 40% 20%;
background: #008ed6;
}
.slider div{
margin-right: 5px;
}
.slick-slide{
opacity: .6;
}
.slick-center{
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
}
</style>
<body>
<section id="slick-content">
<div class="slider">
<div><div class="slide-h3">1</div></div>
<div><div class="slide-h3">2</div></div>
<div><div class="slide-h3">3</div></div>
<div><div class="slide-h3">4</div></div>
<div><div class="slide-h3">5</div></div>
<div><div class="slide-h3">6</div></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
speed:1500,
index: 2,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
You have 2 sliders defined (center, single-item) while in your html only "single-item" has slides.
The "center" slide is wrapping the "single-item" and holds only one child div.
The class single-item was written with spaces making it 3 different classes "single" "-" (although I don't think this one is a class) and "item".
If you intended to make the "single-item" slide to show in centerMode then this is the right code:
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('.single-item').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<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>
</div>
</section>
After cleaning up your snippet to work correctly (moved HTML to the HTML part, removed extraneous and erroneous white space), I can't tell what isn't working with your code. Maybe it was just syntax errors?
The main thing I noticed was that you had class="single - item" on an element that was clearly meant to have the class single-item, as that was the selector used to create your slider. I don't know if that was in your original code or if it was just copied incorrectly.
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<section id="features" class="blue">
<div class="center">
<div class="content">
<div class="single-item">
<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>
</div>
</div>
</section>