This question already has answers here:
Disable Prev Control on first slide and disable Next control on last slide
(9 answers)
Closed 2 years ago.
$('.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
});
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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' type='text/css' media='all' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css' type='text/css' media='all' />
<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>
I am using slick slider in website. Having problem to hide and show arrows on different slides. For example hide preview(left) arrow when there is 1st slide is active and hide next(right) arrow when there is last slide. Between 1st and last both arrows will be shown.
infinite option has default = true. Setting it to false does what you want.
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
infinite: false
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true,
infinite: false
});
.slick-disabled:before {
display: none;
}
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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' type='text/css' media='all' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css' type='text/css' media='all' />
<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>
Related
I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
How to create the following tabs using javascript/jquery?
I have attempted to make this using slick.js but every time I swipe the tabs, slick registers it as a click and loads the content of the tab I just touched. How can I eliminate this?
$(function() {
'use strict';
$('.pageFoot').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.pageContent',
arrows: false,
infinite: false,
focusOnSelect: true,
centerMode: true,
swipeToSlide: true,
touchThreshold: 10,
});
$('.pageContent').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.pageFoot',
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
});
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 10vh 90vh;
}
.pageFoot {
height: 10vh;
width: 100vw;
}
.pageFootItem {
height: 10vh!important;
}
.pageContent,
.pageContentItem {
height: 90vh!important;
width: 100vw;
}
.pageFootItem.slick-current {
box-shadow: inset 0 -5px aqua;
color: aqua;
}
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="pageFoot">
<div class='pageFootItem'>Intro</div>
<div class='pageFootItem'>T01</div>
<div class='pageFootItem'>T02</div>
<div class='pageFootItem'>T03</div>
<div class='pageFootItem'>T04</div>
<div class='pageFootItem'>T05</div>
<div class='pageFootItem'>T06</div>
<div class='pageFootItem'>T07</div>
<div class='pageFootItem'>T08</div>
<div class='pageFootItem'>T09</div>
<div class='pageFootItem'>T10</div>
<div class='pageFootItem'>T11</div>
<div class='pageFootItem'>T12</div>
<div class='pageFootItem'>T13</div>
<div class='pageFootItem'>T14</div>
<div class='pageFootItem'>T15</div>
<div class='pageFootItem'>T16</div>
<div class='pageFootItem'>T17</div>
<div class='pageFootItem'>T18</div>
<div class='pageFootItem'>T19</div>
<div class='pageFootItem'>T20</div>
</div>
<div class="pageContent">
<div class="pageContentItem">Content1</div>
<div class="pageContentItem">Content2</div>
<div class="pageContentItem">Content3</div>
<div class="pageContentItem">Content4</div>
<div class="pageContentItem">Content5</div>
<div class="pageContentItem">Content6</div>
<div class="pageContentItem">Content7</div>
<div class="pageContentItem">Content8</div>
<div class="pageContentItem">Content9</div>
<div class="pageContentItem">Content10</div>
<div class="pageContentItem">Content11</div>
<div class="pageContentItem">Content12</div>
<div class="pageContentItem">Content13</div>
<div class="pageContentItem">Content14</div>
<div class="pageContentItem">Content15</div>
<div class="pageContentItem">Content16</div>
<div class="pageContentItem">Content17</div>
<div class="pageContentItem">Content18</div>
<div class="pageContentItem">Content19</div>
<div class="pageContentItem">Content20</div>
</div>
</body>
As slick.js library isn't free for commercial use, is there any other way of achieving this?
You can achieve that using css with overflowX: scroll.
You can use just html and css to get a result like you want:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.slider {
width: 300px;
background: #f1565a;
overflow: hidden;
}
.slider ul {
white-space: nowrap;
overflow-x: scroll;
}
.slider ul::-webkit-scrollbar {
height: 2px;
}
.slider ul::-webkit-scrollbar-track {
background: rgba(255,255,255, 0.5);
}
.slider ul::-webkit-scrollbar-thumb {
background: rgba(255,255,255, 0.8);
}
.slider ul li {
display: inline-block;
font-family: sans-serif;
padding: 10px;
color: #fff;
}
<div class="slider">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Now, if you need, you can implements js to make arrows. :)
I have two slick sliders working well. Problem with the same navigation: When I slide the first and second slide, the second slide will slide by 2 (like 1:2), at the same time the first slide will slide by one.
I have tried with asNavFor but it has not split the slider1 and slider2 with the same navigation. Can anyone help me to achieve this? Solution will be marked sure.
$('.slider1').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
rows: 1,
swipeToSlide: true,
asNavFor: '.slider2'
});
$('.slider2').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 2,
slidesToScroll: 2,
arrows: true,
asNavFor: '.slider1'
});
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black !important;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
.slick-prev {
position: relative;
top: 45px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<section class="slider slider1">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
<div class="col-sm-6 col-md-6">
<section class="slider slider2">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
</div>
</div>
I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:
I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>
I've got slick carousel on my page and working. I'm trying to make the images center though I'm not having much luck. I've looked at other questions and tried their solutions but still no luck.
Class for carousel
<div class="your-class">
<div class="ad1img">
<img src="images/ad1.jpg" /></div>
<div class="ad2img">
<img src="images/ad2.jpg" /></div>
<div class="ad3img">
<img src="images/ad3.jpg" /></div>
</div>
Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
</script>
CSS
.ad1img {
margin: 0 auto;
}
.ad2img {
margin: 0 auto;
}
.ad3img {
margin: 0 auto;
}
Carousel Example
You may need to set an outer div width and then can center the inner contents:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
.your-class {
width: 800px;
border: 1px solid black;
}
.img-div {
width: 100%;
}
.img-div img {
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>
You have to center you image> See code below
HTML
<div class="your-class">
<div class="adimg ad1img">
<img src="" />
</div>
<div class="adimg ad2img">
<img src="" />
</div>
<div class="adimg ad3img">
<img src="" />
</div>
</div>
CSS
.adimg img{
margin: 0 auto;
}
Use CSS like this:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/><!-- Add the slick-theme.css if you want default styling --><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>.your-class {
width: 20px;
border: 1px solid black;
}
.ad1img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad2img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad3img {
margin: auto;
width: 50%;
padding: 10px;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>