We Keep Coding

react-id-swiper navigation arrow buttons and pagination not working

I am trying to use react-id-swiper in my project. I am just following the examples as shown in this website: https://react-id-swiper.ashernguyen.site/example/navigation.
For some reason the navigation buttons (Left and Right navigation arrow buttons) are not working for me. I even tried using the pagination, even that doesn't work.
This is the codesandbox that I created: https://codesandbox.io/s/peaceful-leftpad-9cgts?file=/src/App.js
Here's the code that I am using:
import React from "react";
import Swiper from "react-id-swiper";
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "./styles.scss";
const params = {
effect: "cube",
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
};
const Slider = () => {
return (
<Swiper {...params}>
<div className="myslide">Slide #1</div>
<div className="myslide">Slide #2</div>
<div className="myslide">Slide #3</div>
<div className="myslide">Slide #4</div>
<div className="myslide">Slide #5</div>
</Swiper>
);
};
export default function App() {
return (
<div className="App">
<Slider />
</div>
);
}
I have the code examples taken from here: https://react-id-swiper.ashernguyen.site/example/navigation .
Can someone tell me what am I missing?

I got the solution of this issue,
the root cause are:
the version of react-id-swiper and swiper did not match each other
I fix this by using react-id-swiper#4.0.0 and swiper#6.0.4
need to import below packages
import Swiper from 'react-id-swiper';
import SwiperCore, { Pagination } from 'swiper';
import 'swiper/swiper-bundle.css';
and add this use code after import
SwiperCore.use([Pagination]);
I got the answer from here: https://github.com/kidjp85/react-id-swiper/issues/453#issuecomment-814500317
Hope this answer can help you.

I've faced the same issue.
The reason is that swiper#^6.4.5 is used. I don't know since what version exactly, but in 6.4.5 swiper has its own implementation of react components, which we have to use.
Refer to this page to understand how to use swiper's react implementation:
https://swiperjs.com/react/

I have faced this issue as well. Even after you import it you have to load the modules directly onto the component.
Follow the code below and it should work perfectly
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/pagination"; // if yo want to style it
import { Navigation, Pagination} from "swiper";
const Slider = () => {
return (
<Swiper
modules={[Pagination]}//you can add any other module here such as navigation and whatever else
pagination={{ clickable: true }}
>
<div className="myslide">Slide #1</div>
<div className="myslide">Slide #2</div>
<div className="myslide">Slide #3</div>
<div className="myslide">Slide #4</div>
<div className="myslide">Slide #5</div>
</Swiper>
);
};

Vue.js can't divide code into loadable small chunks

My problem:
I can't split vue.js code into chunks, I have tried a lot of examples from tutorials. When I am trying to not load vue component with app and split it, for example, with v-if="show_component", got an error component included, but not used. I don't know how to split code and use components, when they needed. In practice, there are no any working examples.
Example of the problem with vue-js-modal:
Can't divide modals into loadable chunks.
I need to load modals only when they triggered to open. It will shrink first page load size. But this option is impossible. Here is my modals structure:
/src/components/Modals/ExampleModal.vue
<template>
<modal name="examplemodal" class="examplemodal-modal" :adaptive="true" :max-width="450">
<div class="header row">
<h3>Title is here</h3>
<v-icon name="times" />
</div>
<div class="content col">
<p>
<b>Some content</b>
<br /><br />
More text here...
</p>
</div>
</modal>
</template>
<style lang="scss">
.examplemodal-modal {
background: rgba(9, 15, 30, 0.3);
.vm--modal {
// I got here a lot of styles in modals
}
}
</style>
/src/main.js
import Vue from 'vue';
import App from './App';
import Icon from 'vue-awesome/components/Icon';
import VModal from 'vue-js-modal';
Vue.component('v-icon', Icon);
/* Tried to make loadable modals, divided to chunks */
Vue.use(VModal, { dynamic: true, injectModalsContainer: true });
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App),
}).$mount('#app');
/src/App.vue
<template>
<div id="app">
<modals-container />
<button class="btn green" #click="showModal">
Show modal
</button>
</div>
</template>
<script>
import ExampleModal from './components/ExampleModal.vue';
export default {
name: 'App',
methods: {
showModal() { this.$modal.show(ExampleModal ) } // Shows empty modal
}
};
</script>
Modal still don't divided into loadable chunks.
If you got any ideas, please, help me.
Version of vue-js-modal:
^2.0.0-rc.3
I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

Webpack has an optimization
Webpzck optimization
Here is en example:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
minSize: 10000,
maxSize: 250000,
}
}
}
}
If you have a test folder, you should set
test: /[\\/]node_modules[\\/]/,
or your tests can't bundle and run.

Owl Carousel npm module is not working in reactjs

I am working on a reactjs application and I am using owl carousel npm module to show some data.
I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
and below is the render method
render() {
const options = {
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: false,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
if(!this.state.response) return(<div>Loading...</div>);
return (
<div className="container">
<div className="PageHeading">
<div className="row">
<div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
<div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All <i className="arrow_carrot-right"></i></Link></div></div>
</div>
<br />
<OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6} options={options}>
{
this.state.response.map((obj,key)=>
<div className="" key={key}>
<div className="subcategories_blockCard">
<Link to={'/book/'+obj.book_title.split(' ').join('-')}>
<img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
{/* <div className="card-content">{obj.book_title}</div> */}
</Link>
</div>
</div>
)
}
</OwlCarousel>
</div>
)
}
Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path http://localhost:3000/ (suppose the logo of the application contains href of http://localhost:3000/ and when click on logo which is <img src="logo.png />) then carousel gets appear on the page.
I don't know how to fix it,
Please help me.

I guess your problem is that you are not using setState to change the state.

Mouseup events are not working inside Swiper

I'm using Swiper to show some slides, and I have some events that run on mouseup, but they are not working with Swiper. When I click the swiper container nothing happens.
You can see it in this example, the alert doesn't work:
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</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>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
I think it does it to avoid events interfering with the Swipe, but if the user doesn't swipe, just clicks, I would like to trigger my events.
How can I do that?

For me, just adding this touchStartPreventDefault: false on Swiper options solved my issues with "mousedown" and "mouseup".

Update Swiper and add touchStartPreventDefault: false in swiper options
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
touchStartPreventDefault: false,
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</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>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>

Swiper does that on purpose to avoid events from messing up the swipe. One way to change this behavior is to trick it to think that your elements are form elements. Internally it does a check and if the target is a form element it allows the click.
You can change Swipers init function to set the form elements data:
const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
this.touchEventsData.formElements = '*';
i.call(this);
};
With that it will no longer lock mouseup events.
The following example shows an event with alert, it works but causes ux problems with the swiping.
document.body.addEventListener('mouseup', () => { alert('mouseup'); });
const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
this.touchEventsData.formElements = '*';
i.call(this);
};
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
});
.swiper-container {
width: 80vw;
height: 80vh;
}
html, body {
width: 100%;
height: 100%;
}
#m {
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div id="m">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</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>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>

Jquery twenty twenty plugin with slider

Created a twenty twenty before after. but I want this before after inside the jquery slider. So that i can view group images of before after
$(window).load(function() {
$("#container1").twentytwenty();
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<div id="container1">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
Please help me to create this.

This is actually quite straight forward. I have put together a working example for you, enjoy:
$(document).ready(function() {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onInit: function() {
$(".swiper-slide-active .container").twentytwenty();
},
onSlideChangeStart: function() {
$('.swiper-slide-active .container').twentytwenty();
},
onlyExternal: true
})
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="container">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="http://www.catchmyfame.com/jquery/conan_bef_sm.jpg">
<img src="http://www.catchmyfame.com/jquery/conan_aft_sm.jpg">
</div>
</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://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/js/swiper.jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>

Using Swiper Slider I tried to use herrbischoff's method, but was unsuccessful I think due to some outdated swiper data. My solution is below and notice a few changes:
touchRatio: 0 is used to turn off dragging so they can actually use the twentytwenty slider.
navigation, pagination need to be used as objects
on: { ... } followed by subobjects of the event name is the new way to access events.
onSlideChangeStart doesn't exist in the new API data, slideChangeTransitionStart does so I believe it was renamed.
(This is only the script solution, you must add the appropriate html and pull in and js and css to get this to function properly)
<script>
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
touchRatio: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
on: {
init: function () {
jQuery(".swiper-slide-active .swiper-container").twentytwenty();
},
slideChangeTransitionStart: function () {
jQuery('.swiper-slide-active .swiper-container').twentytwenty();
},
},
});
});
</script>