Develop Reference

Vue js how to animate component display from top to bottom

I have four components when you hover the mouse over the picture, a certain component is displayed, the problem is that my components are displayed ugly without animation, I want to do so that when I hover over the picture, my components are displayed in an animated way from top to bottom.
As you can see, I have four pictures, for example, when you hover over the first picture, the first component is displayed when you hover over the second, the second component, and so on.
<div class="EnjoyGirlsList">
<div #mouseover="mouseOver1" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-1.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #74C8C5" class="EnjoyCardChildContainer">
<h3>Teens</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver2" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-2.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #76ED00" class="EnjoyCardChildContainer">
<h3>Minxes</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver3" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-3.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #FFE600" class="EnjoyCardChildContainer">
<h3>MILFS</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver4" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-4.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #CC003D" class="EnjoyCardChildContainer">
<h3>COURGARS</h3>
</div>
</div>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<EnjoyBlue v-show="img1"/>
<EnjoyGreen v-show="img2"/>
<EnjoyYellow v-show="img3" />
<EnjoyRed v-show="img4" />
</div>
export default {
name: "HomePage",
components: {EnjoyRed, EnjoyYellow, EnjoyGreen, EnjoyBlue, Navbar, GirlsSectionList, FeaturedShows,},
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
}
},
methods: {
mouseOver1: function(){
this.img1 = true
},
mouseOver2: function(){
this.img2 = true
},
mouseOver3: function(){
this.img3 = true
},
mouseOver4: function(){
this.img4 = true
},
mouseout: function() {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
}
}
}

<div style="margin-top: 50px;">
<slide-y-up-transition>
<RedExperience v-show="img1" />
</slide-y-up-transition>
<slide-y-up-transition>
<OrangeExperience v-show="img2" />
</slide-y-up-transition>
<slide-y-up-transition>
<GreenExperience v-show="img4" />
</slide-y-up-transition>
<slide-y-up-transition>
<BlueExperience v-show="img3" />
</slide-y-up-transition>
</div>
import {SlideYUpTransition} from 'vue2-transitions'
components: {SlideYUpTransition},

Why are all of my file paths broken with innerHTML?

I'm starting to use innerHTML quite a lot with Javascript.
I've also just started using Parcel Bundler.
My problem is that all of my href links and img src file paths don't seem to be working while using innerHTML.
I should also mention that the img links already in the html file are working fine. and I'm using ./ for the innerHTML assigned to the same html file so I can't see any file path issues. Furthermore, if I copy and paste the innerHTML from the JS file into the HTML file the images work fine so it absolutely can't be a file path issue.
There is a lot of code so I'd rather not flood this questions with lines upon lines however this is what I believe to be the relevant code:
I'm using grid-template-areas and flexbox. 'main' being one of my template-area's.
HTML:
<main>
<div class="list-box">
<div class="nav-panel">
<a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="./img/arrow-left.png" alt="Logout Arrow">
<h2 id="logout-btn">Logout</h2></a>
<a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="./img/user.jpg" alt="User Picture">
<h2>Username</h2></a>
<a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
<img class="nav-pic-r nav-img settings-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
<a class="settings-btn hide-desktop"><img class="nav-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
</div>
<div id="settings"></div>
<div id="user"></div>
<div id="lists"></div>
</div>
</main>
At the top of this JS file you'll notice a module import. This is simply JS data for the website.
JS:
import data from './data.js';
const settingsBtn = document.getElementById('settings-btn'); // nav links
const logoutBtn = document.getElementById('logout-btn');
const userBtn = document.getElementById('user-btn');
const lists = document.getElementById('lists');
const settings = document.getElementById('settings');
const user = document.getElementById('user');
logoutBtn.addEventListener('click', () => { // change to lists page
displayLists();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Logout';
userBtn.style.display = 'flex';
settings.innerHTML = '';
user.innerHTML = '';
});
userBtn.addEventListener('click', () => { // change to user page
displayUser();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'none';
lists.innerHTML = '';
settings.innerHTML = '';
});
settingsBtn.addEventListener('click', () => { // change to settings page
displaySettings();
settingsBtn.style.display = 'none';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'flex';
lists.innerHTML = '';
user.innerHTML = '';
});
const displayLists = () => { // lists
lists.innerHTML += `
<div class="category-panel hide-mobile">
<h3>Name:</h3>
<div class="category-sections">
<div class="category-l"><h3>Items:</h3></div>
<div class="category-c"><h3>Reminders:</h3></div>
<div class="category-r"><h3>Created:</h3></div>
</div>
</div>
`;
for (let i = 0; i < data.lists.length; i++) {
let obj = eval(data.lists[i]);
let totalReminders = getTotalReminders(obj);
lists.innerHTML += `
<a href="./list.html">
<div class="list-item">
<p>${obj.name}</p>
<div class="category-sections">
<p class="category-circle-border">${obj.items.length}</p>
<p class="category-circle-border">${totalReminders}</p>
<p class="date-width">${obj.created}</p>
</div>
</div>
</a>
`;
}
};
const getTotalReminders = passed => {
let total = 0;
for (let i = 0; i < passed.items.length; i++) {
total += passed.items[i].reminders;
}
return total;
};
displayLists();
const displaySettings = () => {
settings.innerHTML = `
<div class="row-auto">
<div class="flex-column hover">
<img class="api-img" src="./img/apple.png" alt="Apple Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/windows.png" alt="Windows Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/android.png" alt="Android Logo">
<div class="flex">
<h3>Not Connected</h3>
<div class="circle api-colour-offline"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/google.png" alt="Google Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
</div>
<div class="row-auto-c">
<h3>Background:</h3>
</div>
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="./img/background-0.jpg" alt="Background 1">
<img class="settings-bg-pic hover" src="./img/background-1.jpg" alt="Background 2">
<img class="settings-bg-pic hover" src="./img/background-2.jpg" alt="Background 3">
<img class="settings-bg-pic hover" src="./img/background-3.jpg" alt="Background 4">
<img class="settings-bg-pic hover" src="./img/background-4.jpg" alt="Background 5">
<img class="settings-bg-pic hover" src="./img/background-5.jpg" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="./img/background-0.jpg" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>
<div class="row-auto">
<div class="flex-column">
<h3>Background On</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>Random Slider</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>24h Time</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
</div>
`;
const getBG = document.getElementsByClassName('settings-bg-pic');
const changeBG = BG => { // settings background change
for (let i = 0; i < BG.length; i++) {
BG[i].addEventListener('click', () => {
document.body.style.backgroundImage = `url(./img/background-${[i]}.jpg)`;
});
}
};
changeBG(getBG);
const slide = document.querySelectorAll('.slider');
const sliders = (slide) => { // sliders
slide.forEach(slider => slider.addEventListener('click', (i) => {
i.currentTarget.querySelector('.slider-circle').classList.toggle('slider-checked');
}));
};
sliders(slide);
}
const displayUser = () => {
user.innerHTML = ``;
}
While running Parcel Bundler if I click on my links it simply reloads the page and all of my img's are broken with the alt showing.

Ok I found the solution. The problem was with Parcel Bundler and how it bundles the img files to the dist folder. It doesn't like simply putting img src file paths in the innerHTML. It wants you to import the img's into the JS its self. Here is my solution:
import arrowUp from '../img/arrow-up.png';
import arrowDown from '../img/arrow-down.png';
import arrowLeft from '../img/arrow-left.png';
import arrowRight from '../img/arrow-right.png';
import user from '../img/user.jpg';
import apiApple from '../img/apple.png';
import apiWindows from '../img/windows.png';
import apiAndroid from '../img/android.png';
import apiGoogle from '../img/google.png';
import plus from '../img/add.png';
import tick from '../img/tick-green.png';
import cog from '../img/cog.png';
import bin from '../img/bin.png';
import doc from '../img/document.png';
import lock from '../img/lock.png';
import png from '../img/save.png';
import BG0 from '../img/background-0.jpg';
import BG1 from '../img/background-1.jpg';
import BG2 from '../img/background-2.jpg';
import BG3 from '../img/background-3.jpg';
import BG4 from '../img/background-4.jpg';
import BG5 from '../img/background-5.jpg';
import fb from '../img/facebook.png';
import insta from '../img/insta.png';
import twitter from '../img/twitter.png';
module.exports = {
arrows: [
arrowUp, arrowDown, arrowLeft, arrowRight,
],
symbols: [
plus, tick, cog, bin, doc, lock, png,
],
user: [
user,
],
bgImg: [
BG0, BG1, BG2, BG3, BG4, BG5,
],
apiImg: [
apiApple, apiWindows, apiAndroid, apiGoogle,
],
footer: [
fb, insta, twitter,
],
}
Main JS:
import img from './images.js';
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="${img.bgImgs[0]}" alt="Background 1">
<img class="settings-bg-pic hover" src="${img.bgImgs[1]}" alt="Background 2">
<img class="settings-bg-pic hover" src="${img.bgImgs[2]}" alt="Background 3">
<img class="settings-bg-pic hover" src="${img.bgImgs[3]}" alt="Background 4">
<img class="settings-bg-pic hover" src="${img.bgImgs[4]}" alt="Background 5">
<img class="settings-bg-pic hover" src="${img.bgImgs[5]}" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="${img.bgImgs[0]}" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>

How to get this code to move one class at a time

So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>

The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/

Use Owl Carousel Url Hash Navigation to Change Button Style

Here is my owl carousel HTML and javascript.
HTML:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" data-hash="slide1">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide2">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide3">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
</div>
JavaScript:
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash'
});
I have a navigation block below it that uses Url Hash Navigation.
<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
</div>
When a slide is clicked to or comes on screen, I need the corresponding link to change it's styles to show it is the one currently active.
I haven't found any native way to do this in Owl Carousel and wasn't sure how to accomplish this with Javascript

After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}

Owl Carousel supports this natively, see here in the docs:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

iDangerous Swiper initialSlide setting

For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.
The mobile version uses the same images and order as our dekstop version, because
both versions use the same database query.
/*
* Carrousel
*/
$q = "
SELECT
c.id,
CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
FROM
product_carrousel c
WHERE
c.product_id = '" . $product_id . "'
ORDER BY
c.order ASC
";
$r["carrousel"] = $this->db->select($q);
What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.
HTML/PHP Mobile version:
<div class="swiper-container product-slider">
<div class="swiper-wrapper">
<?php foreach ($product['carrousel'] as $x => $item):?>
<div class="swiper-slide">
<figure class="swiper-slide-img">
<img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
</figure>
</div>
<?php endforeach; ?>
</div>
HTML Output Mobile:
<div class="swiper-container product-slider done">
<div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
</div>
Partial solution:
In idangerous.swiper.min.js i found the setting: initialSlide.
Changing that to -1 makes the slider start with the last slide in mobile.
I've added to ui.js the following:
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
},
Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.
On load:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
While dragging/swiping:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
</div>
After swipe:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>

Solution
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
$(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});