How can I add a class 'selected' to ".swiper-slide" when it is clicked?
I also want to change the image src when svg-img1, 2, or 3 is clicked.
However, I need the image to revert back to its default src when another swiper-slide is clicked.
$('.swiper-slide').on('click', function() {
$('.swiper-slide').removeClass('selected');
$(this).addClass('selected');
});
jQuery(document).ready(function($) {
$('#swi-image1').on({
'click':function() {
if($('#svg-img1').hasClass("selected")) {
$('#svg-img1').attr('src','/img/front/photos-white.svg');
} else {
$('#svg-img1').attr('src','/img/front/photos.svg');
}
});
$('#swi-image2').on({
'click':function() {
$('#svg-img2').attr('src','/img/front/youtube-white.svg');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container pt-2 pb-4" id="contents-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" id="swi-img1"><img src="/img/front/photos.svg" id="svg-img1">card</div>
<div class="swiper-slide" id="swi-img2"><img src="/img/front/youtube.svg" id="svg-img2">youtube</div>
<div class="swiper-slide" id="swi-img3"><img src="/img/front/microphone.svg" id="svg-img3">cast</div>
</div>
</div>