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>
Related
I am currently using owl carousel to make a slide with pictures.
But the problem now is, I wanna make the navigation on both side (not on top of the slide).
Below is my script:
$('.teamc').owlCarousel({
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
center: true,
nav: true,
loop: true,
autoplay:true,
navText: ['<div class="customNextBtn" style="float:left; margin-left:33px"></div>', '<div class="customPreviousBtn" style="float:right; margin-right:33px"></div>'],
responsiveClass: true,
responsive: {
0: {
center: true,
items: 1,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
600: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
1000: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: true,
loop: true
}
}});
Here is the sample picture of what I want it to be:
if you have this:
<div class="main-content">
<div class="owl-carousel owl-theme">
<div class="item">...</div>
<div class="item">...</div>
...
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
you should add below code in js :
$('.main-content .owl-carousel').owlCarousel({
.... ,
navContainer: '.main-content .custom-nav',
....
});
I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);
The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>
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{}
I need to make slick carousel to move automatically, infinity and without stopping. This is what I already have:
$('#carousel').slick({
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 1000,
speed: 1000,
infinite: true,
focusOnSelect: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div id="carousel">
<div><img src="http://placehold.it/205x105" /></div>
<div><img src="http://placehold.it/205x105/f00/fff" /></div>
<div><img src="http://placehold.it/205x105/00f/fff" /></div>
<div><img src="http://placehold.it/205x105" /></div>
<div><img src="http://placehold.it/205x105/f00/fff" /></div>
<div><img src="http://placehold.it/205x105/00f/fff" /></div>
</div>
But as you can see, when it move to another slide, it stops for a while and then move to next one. I want to make it run slowly without stopping. I think you know what I mean.
You need to set autospeed: 0 and add cssEase:linear which will provide the ticker effect you are looking for.
Here is a jsfiddle working demo
$('#carousel').slick({
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 0,
speed: 2000,
cssEase:'linear',
infinite: true,
focusOnSelect: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div id="carousel">
<div><img src="http://placehold.it/205x105" /></div>
<div><img src="http://placehold.it/205x105/f00/fff" /></div>
<div><img src="http://placehold.it/205x105/00f/fff" /></div>
<div><img src="http://placehold.it/205x105" /></div>
<div><img src="http://placehold.it/205x105/f00/fff" /></div>
<div><img src="http://placehold.it/205x105/00f/fff" /></div>
</div>
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>