We Keep Coding

How do I hide the swiper pagination for specific slides in react?

I have some 10 slides in my page, and it is done using react swiper. So I need the pagination (in my case I have used bullets) to be hidden for the slides 1 and 10. Is there a way to hide those using js in react?

One solution.
Use swiper API:
1/2. Detect specific slides by index:
Detect if this slide index is zero for example (first slide) by realIndex & slideChange event than do something:
swiper.on('paginationUpdate', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
console.log("hello first slide");
}
});
2/2. Destroy/Init pagination by API:
swiper.pagination.init()
swiper.pagination.destroy()
swiper.on('slideChange', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
/* Destroy pagination if slide is 1 */
this.pagination.destroy();
}else{
/* Initialize pagination */
this.pagination.init();
}
});
Demo example
(**In HTML - but use the idea/concept for Swiper React):
const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
/* hide pagination on load */
this.pagination.destroy();
}
},
});
swiper.on('paginationUpdate', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
/* hide pagination if slide is 1 */
this.pagination.destroy();
}else{
/* else show */
this.pagination.init();
}
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1 - Hide pagination</div>
<div class="swiper-slide">Slide 2 - Show pagination</div>
<div class="swiper-slide">Slide 3 - Show pagination</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>
</div>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>

How to change swipe direction in swiper.js?

I'm struggling with changing swipe direction when I rotate my swiper on 90deg. So in the beginning by default it has horizontal direction. When clicking on slide I'm rotating "swiper-container" making it full screen . So it still has swiping direction from left to right , but I need to change from top to bottom without changing in params direction to vertical .
const topSwiper = new Swiper(this.DOMTopSwiper.current, {
spaceBetween: 0,
observer: true,
observeParents: true,
observeSlideChildren: true,
direction: "vertical",
navigation: {
nextEl: ".top-swiper-button-next",
prevEl: ".top-swiper-button-prev",
},
pagination: {
el: ".zoom-amount-slides",
type: "fraction",
},
})

Destroy previous Swiper and reinitialize Swiper giving the direction value. Here is doc
DEMO
let isVertical = true,
direction = 'vertical';
let swiper = initSwiper(direction);
function initSwiper(direction) {
return new Swiper('.swiper-container', {
spaceBetween: 50,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
direction: direction
});
}
function changeDirection() {
isVertical = !isVertical;
direction = isVertical ? 'vertical' : 'horizontal';
let slideIndex = swiper.activeIndex;
swiper.destroy(true, true);
swiper = initSwiper(direction);
swiper.slideTo(slideIndex,0);
}
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 400px;
height: 400px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js"></script>
<button onclick='changeDirection()'>Change Direction</button>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

For who's searching this in 2022, now is possible to update direction using swiper.changeDirection('vertical'); // or horizontal
complete example here:
https://stackblitz.com/edit/swiper-demo-43-change-direction

Try my solution.
//Tested in Swiper 7.2.0
/**
* Insert to your page
*/
var rotate90Swiper = (function (swiper, optIsRotate90) {
var isRoate90 = !!optIsRotate90
swiper.___touches = {}
swiper.___touches.currentX = swiper.touches.currentX
Object.defineProperty(swiper.touches, 'currentX', {
set: function (v) {
if (!isRoate90) {
swiper.___touches.currentX = v
} else {
swiper.___touches.currentY = v
}
},
get: function () {
return swiper.___touches.currentX
}
})
swiper.___touches.currentY = swiper.touches.currentY
Object.defineProperty(swiper.touches, 'currentY', {
set: function (v) {
if (!isRoate90) {
swiper.___touches.currentY = v
} else {
swiper.___touches.currentX = v
}
},
get: function () {
return swiper.___touches.currentY
}
})
return function (b) {
isRoate90 = b
}
})
/**
* How to use
*/
var setRotate90 = rotate90Swiper(YourSwiperInstance, defaultIsRotate90)
setRotate90(false) // swiper rotate 90deg
setRotate90(true) //normal swiper

Quick edit if you need to rotate at 180 your swiperjs
var rotate180Swiper = (function (swiper, optIsRotate180) {
var isRoate180 = !!optIsRotate180
swiper.___touches = {}
swiper.___touches.currentX = swiper.touches.currentX
Object.defineProperty(swiper.touches, 'currentX', {
set: function (v) {
if (!isRoate180) {
swiper.___touches.currentX = -v
} else {
swiper.___touches.currentX = v
}
},
get: function () {
return swiper.___touches.currentX
}
})
return function (b) {
isRoate180 = b
}
})

Just simply add reverseDirection: true, in the autoplay
autoplay: {
delay: 0,
disableOnInteraction: true,
reverseDirection: true,
},

mixitup not working with price slide range

i working on mixitup plugin with jRange slider jquery plugin and is working good without jRange slider, but when i include jrange slider for mobiles price its not filter and not show product within the range. how to filter multiple selector. for example when click on iphone products , its show all iphone product but i want to also show iphone products with in price range. or any other products.
how to fix the problem.
jQuery(document).ready(function($) {
var price_mega = {};
main_filter();
$('.slider-input').jRange({
from: 0,
to: 400,
format: '$%s',
showLabels: true,
isRange : true,
onstatechange: function(value){
result = value.split(',');
price_mega = result;
main_filter();
}
});
function main_filter(){
$('.container').each(function(index, el) {
var min_price = Number(price_mega[0]);
var max_price = Number(price_mega[1]);
// console.log(min_price);
var active = $(this).data('active');
var wrap = $(this).closest('.main-wrapper');
var target = wrap.find('.target_filter');
var filter = wrap.find('.controls .filter');
// var filter = wrap.find('.container').find('.target_filter').filter(function(){
// var price = Number($(this).attr('data-price'));
// return price >= min_price && price <= max_price
// });
wrap.find('.container').mixItUp({
selectors: {
target: target,
filter: filter
},
load: {
filter: active,
}
});
});
}
});
.controls {
padding: 1rem;
background: #333;
font-size: 0.1px;
}
.controls button{
font-size: 27px;
color: gray;
margin-left: 20px;
}
.mixitup-control-active {
background: #393939;
}
.mixitup-control-active[data-filter]:after {
background: transparent;
}
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
border-top: .5rem solid currentColor;
border-radius: 2px;
margin-bottom: 1rem;
position: relative;
display: none;
}
.mix.green {
color: #91e6c7;
}
.mix.pink {
color: #d595aa;
}
.mix.blue {
color: #5ecdde;
}
.mix,
.gap {
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
#media screen and (min-width: 541px) {
.mix,
.gap {
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
}
}
#media screen and (min-width: 961px) {
.mix,
.gap {
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
}
}
#media screen and (min-width: 1281px) {
.mix,
.gap {
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script>
<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/>
<div class="main-wrapper">
<div class="controls">
<button type="button" data-filter="all" class="filter">All</button>
<button type="button" data-filter=".samsung" class="filter">Samsung</button>
<button type="button" data-filter=".iphone" class="filter">Iphone</button>
<button type="button" data-filter=".blackberry" class="filter">Blackberry</button>
<div style="margin-top: 5%;height: 22px;">
<input type="hidden" class="filter slider-input" value="0,400" />
</div>
</div>
<div class="container" data-active=".samsung">
<div class="target_filter mix samsung" data-price="200">samsung 1(price $200)</div>
<div class="target_filter mix blackberry" data-price="111">blackberry 1(price $111)</div>
<div class="target_filter mix samsung" data-price="165">samsung 2(price $165)</div>
<div class="target_filter mix iphone" data-price="300">iphone 1(price $300)</div>
<div class="target_filter mix iphone" data-price="340">iphone 2 (price $340)</div>
<div class="target_filter mix samsung" data-price="100">samsung 3 (price $100)</div>
<div class="target_filter mix blackberry" data-price="89">blackberry 2(price $89)</div>
<div class="target_filter mix iphone" data-price="232">iphone 3(price $232)</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>

remove siblings class from a href

I'm using owl carousel on a menu.
when I scroll to the div the owl carousel auto slide to the right slides.
now when I arrived in the specific div I add class to the slide (active) but for some reason, I can't remove the active class from the other slides (his siblings).
I think it will be best to check the jsfiddle to understand the problem...
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
Review
a
b
c
d
e
f
</ul>
</div>
JS file
$('.owl-carousel').owlCarousel({
nav: false,
dots: false,
singleItem: true,
})
var owl = $('.owl-carousel');
owl.owlCarousel();
$( window ).scroll(function() {
let scrollbarLocation = $(this).scrollTop();
let scrollLinks = $('.item');
scrollLinks.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollbarLocation){
$(this).siblings().removeClass('active-link');
$(this).addClass('active-link');
let goToSlide = $(this).attr('data-num')
owl.trigger('to.owl.carousel', goToSlide);
}
})
if( scrollbarLocation === 0){
scrollLinks.removeClass('active-link');
owl.trigger('to.owl.carousel', 0);
}
});
check https://jsfiddle.net/jt31h4pr/132/

The problem is that you remove/add active-link class on the same element ( this ). You need to removeClass only on the the element that already has class active-link.
The class active is controlled by the plugin and all the elements that are visible have the active class
See below
$('.owl-carousel').owlCarousel({
nav: false,
dots: false,
singleItem: true,
})
var owl = $('.owl-carousel');
owl.owlCarousel();
$( window ).scroll(function() {
let scrollbarLocation = $(this).scrollTop();
let scrollLinks = $('.item');
scrollLinks.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollbarLocation){
$('.active-link').removeClass('active-link'); // added
$(this).addClass('active-link');
let goToSlide = $(this).attr('data-num')
owl.trigger('to.owl.carousel', goToSlide);
}
})
if( scrollbarLocation === 0){
scrollLinks.removeClass('active-link');
owl.trigger('to.owl.carousel', 0);
}
});
.body {
height: 5000px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.item {
width: 200px;
height: 70px;
background: red;
margin: 0 15px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 4px solid transparent;
}
.active-link {
border-bottom: 4px solid #000;
}
.menu {
position: fixed;
top: 0;
}
section {
width: 100%;
height: 600px;
background: #f8f9fb;
}
#a {
background: lightblue;
margin-top: 200px;
}
#b {
background: lightgreen;
}
#c {
background: tomato;
}
#d {
background: lightpink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
Review
a
b
c
d
e
f
</ul>
</div>
<section id="a"></section>
<section id="b"></section>
<section id="c"></section>
<section id="d"></section>
</div>

Look into this fiddle
https://jsfiddle.net/09sLpuwd/1/
What are you doing wrong is trying to remove active class from this and then add active class to the same this, which actualy do nothing.
Insted what I propose is to remove active class from all '.item' emelements and than add it to active one.
As alternative aproach you can store previous item and remove class from it, but I think first way is better.

Hi the problem is with below line
$(this).siblings().removeClass('active-link');
replace it with
$("div.active a").removeClass('active-link');
This was removing and adding class on same time on all so what i did is once i am removing the class from all i am adding it on present elemnt

adding html tags/semantics through js

So basically I have a simple system with a list, where when I choose one item it displays a description and an image binded to that item.
The project: https://jsfiddle.net/jhnjcddh/2/
The problem is that I need to add the text inside my JS, thus If I would want to add any tags like <b></b>; or such I would Incase that text inside there:
map.set(item1, {
desc: '<a href=''>Hello!</a>',
...
});
BUT The outcome of this is the full form so like this:
<a href=''>Hello!</a>
I tried putting it into a var and appending:
var text1 = '<a href=''>Hello!</a>'
map.set(item1, {
desc: text1,
...
});
..but that gives the same outcome.
THE CODE:
// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var siblings = this.parentNode.childNodes
siblings.forEach(function(element) {
if (element.className){ // && element.className.indexOf('active') !== -1) { // TAKIT: Removed, see suggestion below
if (element.classList.contains('active')) // TAKIT: Suggestion: Easier, and better readability!
element.classList.remove("active");
}
})
this.classList.add("active"); // TAKIT: Suggestion instead of this.className += " active";
});
}
// -----------------END OF STYLING ELEMENT-----------------
// -----------------START OF LOGIC ELEMENT-----------------
const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, {
desc: 'text1',
img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
desc: 'some description item2',
img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
desc: 'some item3',
img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
desc: ' description for item4',
img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});
map.set(item5, {
desc: 'This item5 is cool',
img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
desc: 'item6 displays attitude',
img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
desc: 'amazing item7 just breathtaking',
img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
desc: ' item8 is an interesting conept',
img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});
// you can bind on click handler for example
const list = document.querySelectorAll('ol'); // TAKIT: Modified to return multiple elements
list.forEach(function() { // TAKIT: Added to manage the multiple elements
this.addEventListener('click', event => {
// if element that was registered in our map triggered the event
if (map.has(event.target)) {
var wrapper = event.target.closest('.wrapper'); // TAKIT: Get parent wrapper
// change text of description area
wrapper.querySelector('.description').textContent = map.get(event.target).desc; // TAKIT: Modified
// change src of the image
wrapper.querySelector('img').src = map.get(event.target).img; // TAKIT: Modified
}
});
});
// -----------------END OF LOGIC ELEMENT-----------------
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* containers */
#content-working {
margin: 20px;
}
* {
font-family: Corbel;
}
.wrapper {
border: 1px solid red;
padding: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.image,
.description,
.list {
border: 1px solid #472836;
box-sizing: border-box;
margin: 5px;
}
/* list */
.list {
width: 150px;
height: 250px;
background-color: #9AD2CB;
overflow-y: auto;
overflow-x: hidden;
}
.list ol {
list-style: none;
padding: 0;
margin: 0;
}
.list li {
padding: 5px;
transition: all .3s ease;
}
.list li:nth-child(even) {
background-color: #91f2e6;
width: 100%;
height: 100%;
}
.list li:hover,
.list .active {
cursor: pointer;
color: red;
padding-left: 25px;
}
/* sub-container */
.image,
.description {
width: 150px;
height: 150px;
}
.image {
background-color: #D7EBBA;
}
.image img {
width: 100%;
height: 100%;
}
.description {
background-color: #FEFFBE;
overflow-y: auto;
overflow-x: hidden;
height: 95px;
}
<div id="content-working">
<div class="wrapper">
<div class="list">
<ol>
<li id="item1" class="item">items1</li>
<li id="item2" class="item">items2</li>
<li id="item3" class="item">items3</li>
<li id="item4" class="item">items4</li>
</ol>
</div>
<div class="image-container">
<div class="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div class="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
<div class="wrapper">
<div class="list">
<ol>
<li id="item5" class="item">items5</li>
<li id="item6" class="item">items6</li>
<li id="item7" class="item">items7</li>
<li id="item8" class="item">items8</li>
</ol>
</div>
<div class="image-container">
<div class="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div class="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
</div>
What am I doing wrong here? Why isn't this working?

You're setting everything through textContent.
Use innerHTML to allow tags being interpreted.
https://jsfiddle.net/pd6o0zfn/ (items7)

On line 70 of your Jsfiddle :
wrapper.querySelector('.description').textContent = map.get(event.target).desc; // TAKIT: Modified
You need to replace .textContent by .innerHTML as follow to keep your HTML formatting :
wrapper.querySelector('.description').innerHTML = map.get(event.target).desc; // TAKIT: Modified