We Keep Coding

Swiper pagination, trigger js code on specific slide

I'm using SwiperJS for sliders.
I was wondering if it's possible to set trigger js code on specific slide in Swiper?
For example, if the user is on second slide the background changes, it triggers JS code getElementById("body");element.classList.add("some-class");
This should also work with arrows, so maybe the question should be,

There's a bunch of events that comes with SwipeJS out of the box.
You can check swiper.realIndex after slideChange event to trigger something only on specific slide.
const swiper = new Swiper('.swiper-container', {
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
// Do something on slide #2 (note that index starts from 0)
swiper.on('slideChange', (sw) => {
if (sw.realIndex === 1) {
console.log(`Message seen only after changing to slide #${swiper.realIndex + 1}`);
}
});
.slide {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.slide-1 {
background-color: lightgreen;
}
.slide-2 {
background-color: pink;
}
.slide-3 {
background-color: lightblue;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="slide slide-1">1</div>
</div>
<div class="swiper-slide">
<div class="slide slide-2">2</div>
</div>
<div class="swiper-slide">
<div class="slide slide-3">3</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>

Slick slider not working when initialSlide is set

I can't figure out why the slides do not slide when I have an initialSlide set. I'm referring to the docs at https://kenwheeler.github.io/slick/, but couldn't figure out what the problem is.
$('.container').slick({
initialSlide: 4,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1
})
* {
box-sizing: border-box;
}
.container {
width: 120px;
}
.slide {
border: 1px solid red;
width: 40px;
}
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>

You have set the initial slide to 4 (i.e. index 4 is slide #5) - this is the last slide in your carousel. The problem is that your carousel is showing 3 slides, so you want the initial slide to be #3 which has index: 2:
(total slides - slidesToShow) = 5-3 = 2
If you set initialSlide: 2 this will still show the last 3 slides but it also sets up the "previous" button to go to slide #2 which will trigger a scroll. (The Next button won't have any effect of course, because you are showing the last slide and have infinite:false)
Working Example:
$('.container').slick({
initialSlide: 2,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1
})
* {
box-sizing: border-box;
}
.container {
width: 120px;
}
.slide {
border: 1px solid red;
width: 40px;
}
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>

it is to work
$('.container').slick({
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 3
})
you have 5 slides, but the initial one you specified is 4, and at the same time show 3. but the initial 1 is slide 2, the Initial 4 is slide 5, but slidesToShow: 3. the slider doesn't have any spare slides to show
while I was writing the answer it is already given in the comments

Since 2014 initialSlide not working in responsive config, so can use
$('.selector').slick('slickGoTo', 5);

Iterate matching elements to control custom slick carousels

I am using slick carousel with some custom code to provide pagination. It's working great but now I want to have multiple carousels per page and although I've found solutions, I'm having trouble getting them to work with the customisations in my code.
There is an example [here] (Multiple Slick Sliders Issue) that iterates over all elements with a particular class and assigns an ID, but I just can't get it working with the custom pagination code I have.
$('.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>

You could create a wrapper container to isolate instances
<div class="slider">
<div class="carousel">
<div class="item">1</div>
<div class="item">2</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>
</div>
Then to initialize use an each loop for isolation
$('.slider').each(function() {
var $slider = $(this),
// arrows within this instance
$nArrow = $slider.find('.next'),
$pArrow = $slider.find('.prev');
// initialize this carousel instance with appropriate arrows
$slider.find('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $pArrow,
nextArrow: $nArrow
});
})
For the events , look up to the container class and use find() for the elements within that instance
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
var $slider = $(this).parent();
// examples finding elements within this instance
let total = $slider.find('.carousel .item').length;
var first = $slider.find('.slick-active:first > div:first').get(0);
var last = $slider.find('.slick-active:last > div:last').get(0);
// use find for other elements also
......
})

How to adjust width of the image on the slick-track

I have a problem about the width of slick.js Where the box on the slick-track exceeds the page on the website.
Please pay attention to the image I uploaded this:
for the use of my program code more or less like this:
jQuery('.image-slider').slick({
slidesToShow: 1.7,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: false,
});
.image-slider .slick-slide {
margin: 0 2px;
display: inline-block;
}
.image-slider a {
display: block;
width: 100%;
}
.image-slider img {
width: 860px;
height: auto;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='image-slider'>
<div class='overlay-container'>
<a href='#'><img src='http://www.sixteenconsulting.com/sixteenblog/wp-content/uploads/2017/10/veille_complexe-800x533.jpg' />
<div class='overlay'>
<div class='text' />
</div>
</a>
</div>
<div class='overlay-container'>
<a href='#><img src=' http://www.herbusiness.co.ke/wp-content/uploads/2017/10/battlefield_africa_winners-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
<div class='overlay-container '>
<a href='# '><img src='https://disrupts.com/wp-content/uploads/2016/08/00948135202729.56ed9d795bc5b-2-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
</div>

I couldn't work this out for ages myself. I was changing the
<img width="200px" href="myimage.png">
in the div's but that didn't work. Also I'm using tables so its even more complicated. This can create lots of white space after the images.
Because the whole thing is responsive you need to use width with a percentage to make them work correctly, so that it scales as you change your screen width.
<img width="100%" href="myimage.png">
or some percentage of the screen.

How can we make different padding top and bottom values for diff sections in fullPage.js?

Normally in fullpage.js we can set single global
paddingTop, paddingBottom value via below code:
$('#fullpage').fullpage({
paddingTop: '130px',
paddingBottom: '50px',
});
My question is can we assign multiple paddingTop,paddingBottom values to individual scroll sections TO achieve more flexible layout display?
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#4A6FB1', '#939FAA'],
scrollOverflow: true,
sectionSelector: '.section',
slideSelector: '.slide',
slidesNavigation: true,
slidesNavPosition: 'bottom',
verticalCentered: false,
resize: false,
autoScrolling: true,
paddingTop: '130px',
paddingBottom: '50px'
});
});
.slider-container {
width: 50%;
}
.title-text {
font-size: 30px;
font-weight: bold;
}
p {
line-height: 3em;
}
.contentline { border:1px solid white; }
#demo {
position: absolute;
top: 50px;
margin: 0;
left: 0;
right: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
<div class="section">
<div class="container slider-container">
<div class="row margin-0" id="demo">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<div class="title-text">padding:130px,bottom:80px layout</div>
</div>
</div>
<div class="slide contentline" id="slide1" data-anchor="s1">
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<p class="title-text">you may press Arrow Down Key to scroll to the next section </p>
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
<p>line6</p>
<p>line7</p>
<p>line8</p>
<p>line9</p>
<p>line10</p>
<p>line11</p>
<p>line13</p>
<p>line14</p>
<p>line15</p>
<p>line16</p>
<p>line17</p>
<p>line18</p>
<p>line19</p>
<p>line20</p>
<p>line21</p>
<p>line22</p>
<p>line23</p>
<p>line24</p>
<p>line25</p>
<p>line26</p>
<p>line27</p>
<p>line28</p>
<p>line29</p>
<p>line30</p>
</div>
</div>
</div>
<div class="slide" id="slide2" data-anchor="s2">
slide2
</div>
<div class="slide" id="slide3" data-anchor="s3">
<p>slide3</p>
</div>
<div class="slide" id="slide4" data-anchor="s4">
<p>slide4</p>
</div>
</div>
<!--end of container-->
</div>
<div class="section title-text">
<div class="contentline">
Some sections<br> which require different<br> paddingTop and padding bottom values<br>
For example this page, if i need paddingTop: 20px; paddingBottom:20px;<br> instead of running global value of 130px 50px;<br>
if using css to override padding,<br>
the calculated slider height is still wrong.
</div>
</div>
</div>

You can override it as suggested by #CraigduToit.
Fullpage.js will read your value as you can see here.
Here's an example of overriding the paddingTop value. I've colored in grey the real content area without the paddings.
I just used:
#section2 {
padding-top: 10px !important;
}
With this initialization:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', 'purple', '#ADD8E6'],
paddingTop: '100px',
paddingBottom: '100px',
scrollOverflow: true,
});

I believe this can be achieved with css, however it requires you to add (or build upon) a uniuque class for each sections content.
I added a class "testingstuff" to your child div on the second section, so the HTML will be:
<div class="section title-text fp-section active testingstuff">....</div>
And then went on to simply create the class in the .css with the following properties:
.testingstuff{
padding:30px 0px 30px 0px !important;
}
So going forward, all you would need to do is create a class for each section, not the most elegant way to do it, but it is rather quick and easy.
Hope this helps.