Jquery Add Class on sixth img

Jquery Add Class on sixth img - javascript

I have multiple image inside a div and using a jquery function to calculate. If image if more than six, then the sixth image will be given a new class. Any idea how to do this ? Thanks
$(function(){
var imglength = $(".shopbar_smallimg_container img").length;
if(imglength > 6){
$(".shopbar_smallimg_container img").attr("class","");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopbar_smallimg_container">
<div class="swiper-nav swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/t.jpg" /></div>
<div class="swiper-slide"><img src="img/black.jpg" /></div>
<div class="swiper-slide"><img src="img/blue.jpg" /></div>
<div class="swiper-slide"><img src="img/t.jpg" /></div>
<div class="swiper-slide"><img src="img/t.jpg" /></div>
<div class="swiper-slide"><img src="img/black.jpg" /></div>
<div class="swiper-slide"><img src="img/blue.jpg" /></div>
<div class="swiper-slide"><img src="img/t.jpg" /></div>
</div>
</div>
</div>

Try below code.
HTML
<div class="shopbar_smallimg_container">
<div class="swiper-nav swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/t.jpg" />
</div>
<div class="swiper-slide">
<img src="img/black.jpg" />
</div>
<div class="swiper-slide">
<img src="img/blue.jpg" />
</div>
<div class="swiper-slide">
<img src="img/t.jpg" />
</div>
<div class="swiper-slide">
<img src="img/t.jpg" />
</div>
<div class="swiper-slide">
<img src="img/black.jpg" />
</div>
<div class="swiper-slide">
<img src="img/blue.jpg" />
</div>
<div class="swiper-slide">
<img src="img/t.jpg" />
</div>
</div>
</div>
</div>
jQuery
$( ".swiper-wrapper div.swiper-slide:nth-child(6)").find('img').addClass("sixth");
JSFIDDLE DEMO

Try this,
$(function(){
if($(".shopbar_smallimg_container img").length> 6){
$(".shopbar_smallimg_container img:eq(5)").addClass('newClass');
}
});
http://www.w3schools.com/jquery/sel_eq.asp

You can add use .eq() - it uses 0 based index so to target 6th img, you need to use index as 5
$(function () {
var $imgs = $(".shopbar_smallimg_container img");
if ($imgs.length > 6) {
$imgs.eq(5).addClass('newclass')
}
})

You just need to use css, there is no need for any javascript
.swiper-slide:nth-child(6):not(:last-child) img {
/* add style here */
}

$(function(){
var imglength = $(".shopbar_smallimg_container img").length;
if(imglength > 6){
$(".shopbar_smallimg_container img:eq(5)").attr("class","myclass");
}
})

Related

How to remove div if img src is empty with javascript

Hi I am trying to figure out how to remove a div if the img src is empty.
I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla javascript?
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt=""
class="imgCard"
color=""
/>
</div>
<div class="swiper-slide">
<img
src=""
alt=""
class="imgCard"
color=""
/>
</div>
</div>

Here how you can do this
const swipers = document.querySelectorAll('.swiper-slide');
swipers.forEach(e => {
const imgSource = e.querySelector('img').getAttribute('src');
if (imgSource.trim() === '') {
e.remove()
}
})
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="" class="imgCard" color="" />
</div>
</div>

You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this
let imgs = document.querySelectorAll(".swiper-slide img");
imgs.forEach(item => {
if (item.getAttribute('src') === "") {
item.parentNode.remove();
}
});
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="Second image alternate text" class="imgCard" color="" />
</div>
</div>

How to show div data by on click event on selector using jQuery

I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'.
I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I want to open one by one i.e. when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open.
How to achieve the same?

jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).next(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use next instead of siblings
JQuery(document).ready(function() {
JQuery(".flip").click(function () {
JQuery(this).next(".panel").slideToggle("slow");
});
});
Working codepen. https://codepen.io/rvtech/pen/zYEWxqR

$(".flip").click(function(e) {
$(this).next().slideToggle()
})
https://codepen.io/hardik9193/pen/yLzKNEZ

How I can replace part of the src of 8 images on click?

I have a slider with 8 images with a common folder in its source (img/banana/#.png, img/strawberry/#.png or img/apple/#.png) that I need to change each time I click on another image out of the slider; it also has a folder with a fruit as a name (banana, strawberry or apple). To add one more level of difficulty, I need the image that works as a changing images on slider, also change part of its src for the one it changes.
So, if the changing image that I clicked has the src img/strawberry/1.png and changes the src of the 8 images that has img/banana/#.png as src, it has to be replaced by img/banana/1.png and the 8 images with img/banana/#.png have to change to img/strawberry/#.png. The problem is that I will always have two changing images, and I need to detect the source that the 8 images of the slider have, so they can be replaced by the one of the changing image that is clicked.
This is the code if the slider has 8 images of bananas.
<div class="row">
<div class="col">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banana/1.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/2.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/3.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/4.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/5.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/6.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/7.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/banana/8.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/frutilla/1.png" alt="">
</div>
<div class="col-4">
<img src="img/apple/1.png" alt="">
</div>
</div>
And this is the result that I seek to obtain if I click on one of the two changing images.
<div class="row">
<div class="col">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/strawberry/1.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/2.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/3.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/4.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/5.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/6.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/7.png" alt="">
</div>
<div class="swiper-slide">
<img src="img/strawberry/8.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/banana/1.png" alt="">
</div>
<div class="col-4">
<img src="img/apple/1.png" alt="">
</div>
</div>
As you can see, the number on the images are always kept, just change the name of the folder (strawberry, banana or apple). I leave an example in image for reference, so it can be understood better.
Btw, the slider I am using is SwiperJS.

Tried to re-create your project so here is an example that might can help you! Click on the small images under the swiper to change the swiper image URL according to the image you clicked on before.
Fiddle demo
HTML
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<!-- https://i.imgur.com/8nKVc0s.jpg ## strawberry-->
<!-- https://i.imgur.com/GBDX2ps.jpg ## banana-->
<body>
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
<div class="swiper-slide"><img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class='selector'>
<img data-type="strawberry" src='https://i.imgur.com/8nKVc0s.jpg'>
<img data-type="banana" src='https://i.imgur.com/GBDX2ps.jpg'>
</div>
</body>
JQUERY
$().ready(() => {
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
$(document).ready(function() {
$('.selector img').click(function() {
var iType = $(this).data("type")
//I don't have strawberry and banana in URL so in your case you can use the following to get the type
/*
var iType = getTypeFromURL($(this).attr("src"))
*/
//Now you go through the images to check their type (or in your case, the URL)
var curr_selection = $(".swiper-container .swiper-wrapper .swiper-slide img").data("type")
if (curr_selection != iType)
{
//if the clicked type AND the current images are not fit (by type) then let's change to swiper img urls
var selectedURL = $(this).attr("src");
$(".swiper-container .swiper-wrapper .swiper-slide img").each(function(){
$(this).attr("src", selectedURL).data("type", iType) //you don't need the .data()
})
}
});
});
})
//In order not to write the logic again and again here is a function that will tell you the type from the URL you give as parameter
function getTypeFromURL(url)
{
if (url.contains("strawberry")) return "strawberry";
else if (url.contains("banana")) return "banana";
}

Photo Gallery Play and Pause Button

dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>

you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play

jQuery .index() always returning 1

I'm attempting to make a block of code happen depending on the index of the the element that is clicked. The problem is that no matter which element I click it spits out 1.
$(document).ready(function() {
$('.container .product a').click(function() {
var a = $(this).index();
alert(a);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me Also!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
M Three!
</div>
</div>
</div>

It is because calling $(this).index() will return the index of this based on its siblings and in your case a is always the second child of its parent
Since you want the index of a based on the set .container .product a, you can use either of the below variants of .index()
$(document).ready(function() {
var $as = $('.container .product a').click(function() {
var a = $as.index(this); //or $(this).index('.container .product a');
alert(a);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me Also!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
M Three!
</div>
</div>
</div>

For more details about index() method, look at Jquery - index
$(document).ready(function() {
$('.container .product a').click(function() {
var a = $(".container .product a").index( this );
alert(a);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
Buy Me Also!
</div>
</div>
<div class="product">
<div class="product-body">
<img src="https://placehold.it/50x50" />
M Three!
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Jquery Add Class on sixth img - javascript

Try this, $(function(){ if($(".shopbar_smallimg_container img").length> 6){ $(".shopbar_smallimg_container img:eq(5)").addClass('newClass'); } }); http://www.w3schools.com/jquery/sel_eq.asp

You can add use .eq() - it uses 0 based index so to target 6th img, you need to use index as 5 $(function () { var $imgs = $(".shopbar_smallimg_container img"); if ($imgs.length > 6) { $imgs.eq(5).addClass('newclass') } })

You just need to use css, there is no need for any javascript .swiper-slide:nth-child(6):not(:last-child) img { /* add style here */ }

$(function(){ var imglength = $(".shopbar_smallimg_container img").length; if(imglength > 6){ $(".shopbar_smallimg_container img:eq(5)").attr("class","myclass"); } })

Related

How to remove div if img src is empty with javascript

How to show div data by on click event on selector using jQuery

How I can replace part of the src of 8 images on click?

Photo Gallery Play and Pause Button

jQuery .index() always returning 1

Categories

Resources