I would like the arrows to be outside of the image gallery container because it's hard to see them. I have tried removing the elements and placing them outside of the gallery-container, but I'm not getting any results.
Not sure if there is a better way on achieving this look or another simple javascript library?
var appendNumber = 4;
var prependNumber = 1;
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
centeredSlides: false,
spaceBetween: -410,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
e.preventDefault();
swiper.prependSlide([
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
]);
});
document.querySelector('.prepend-slide').addEventListener('click', function (e) {
e.preventDefault();
swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
});
document.querySelector('.append-slide').addEventListener('click', function (e) {
e.preventDefault();
swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
document.querySelector('.append-2-slides').addEventListener('click', function (e) {
e.preventDefault();
swiper.appendSlide([
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
]);
});
.swiper-container {
width: 70%;
height: 500px;
margin-top: 50px;
position: relative;
padding: 0 60px
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
.swiper-container .swiper-slide img {
height: 400px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 40px !important;
}
swiper-button-prev {
background-color: white;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: 'next';
color: yellowgreen;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: 'prev';
color: yellowgreen;
}
<section class="dest-gallery-container">
<!-- Slider main container -->
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/img/home/dest-gal-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-4.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-6.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-7.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-8.png" alt="">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
Try this. They should be outside of swiper-container but within your dest-gallery-container. Also put swiper-pagination within swiper-wrapper.
<section class="dest-gallery-container">
<!-- Slider main container -->
<!-- Add Left Arrow-->
<div class="swiper-button-prev"></div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/img/home/dest-gal-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-4.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-6.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-7.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-8.png" alt="">
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Add Right Arrow -->
<div class="swiper-button-next"></div>
</div>
</section>
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..
my Html
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="swiper1 mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide1">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide1">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
and the js code for swiper1 and swiper2:
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
the swiper2 its working as I want. but swiper1 not working.
Basic example
Your first slider missing the mandatory HTML layout (swiper instead of swiper1 and swiper-slide instead of swiper-slide1).
https://swiperjs.com/get-started#add-swiper-html-layout
Wrong:
<div class="swiper1 will_not_work">
<!-- const swiper = new Swiper('.will_not_work', { -->
Correct:
<div class="swiper will_work">
<!-- const swiper = new Swiper('.will_work', { -->
snippet
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
let swiper_setting_two = {
spaceBetween: 200,
}
let swiper_1 = new Swiper("[slider_one]", swiper_setting);
let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);
html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
Loop throw example (multiple sliders with same setting):
You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var swiper_nodes = document.querySelectorAll('.swiper');
/* loop throw */
[].forEach.call(swiper_nodes, function(swiper_node) {
// do whatever
let swiper = new Swiper(swiper_node, swiper_setting);
});
html,
body {
background: #403F6B;
}
main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 3px;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<main>
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</main>
Yes the constructor of Swiper takes as argument one element at a time. So you should loop all the items with a forEach for example.
EDIT:
I made some changes in your HTML to fix the issues.
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
.swiper {
width: 300px;
height: 100px;
margin: 5px;
}
.swiper-slide {
background: yellow;
padding: 20px;
font-size: 32px;
}
.swiper-slide:nth-child(2) {
background: red;
}
.swiper-slide:nth-child(3) {
background: blue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper2">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
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";
}
I'm using swiper js and I'm trying to get the src of the current active swiper image's src and set it to an image src which is not related to the swiper, so that whenever I click on the next or previous buttons It renders the same as swiper current active image.
The code in jsfiddle:
https://jsfiddle.net/fateh_alrabeai/yrtvogbn/35/
The HTML Code:
<!--The image I want to be set it's soursce from the current active swiper image-->
<div class="crrent-image" id="crrent-image" style="text-align:center;">
<img src="https://picsum.photos/200" id="currentImage" alt="">
</div>
<!--swiper code -->
<div class="swiper-container gallery-top" style="margin-top:15px;">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">
</div>
<div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)"></div>
</div>
JavaScript:
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
$(document).ready(function() {
var currentImage = $('.swiper-slide img').attr(src);
// console.log(var1);
$('#crrent-image img').attr('src', currentImage);
});
In case someone was looking for the same answer.
This is how I solved it :
$(".swiper-button-next").click(function() {
var currentActiveSlide = $('.swiper-slide-active img').attr('src');
$('#main_image img').attr('src', currentActiveSlide);
});
$(".swiper-button-prev").click(function() {
var currentActiveSlide = $('.swiper-slide-active img').attr('src');
$('#main_image img').attr('src', currentActiveSlide);
});
I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>
You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>
$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});