hi i'm trying to create responsive slider on my wordpress website, i want to have slider on desktop 5 columns, on tablet 4 columns, and on mobile 3 columns, and hide arrows on mobile using css
this are my codes:
but is seems not working, on any browser width it still display 3 columns, how to fix? thanks
<html>
<!-- start slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
}
</html>
and this is my jquery
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
breakpoints: {
'480': {
slidesPerView: 4,
spaceBetween: 40,},
'#640': {
slidesPerView: 5,
spaceBetween: 50, },
},
// Optional parameters
freeMode: true,
loop: false,
scrollbar: {
el: '.swiper-scrollbar',
hide: true,},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', },
})
});
Wrong syntax.
Problem 1
Missing swiper-slide class.
https://swiperjs.com/get-started/
Change this:
<div>Slide 1</div> to <div class="swiper-slide">Slide 1</div>
Problem 2
Remove this # + the single quotes (Not '480' but 480). swiper param breakpoints - docs
Change
'#640': {
slidesPerView: 5,
spaceBetween: 50, },
},
To:
640: {
slidesPerView: 5,
spaceBetween: 50, },
},
var swiper = new Swiper('.swiper-container', {
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
})
Simple example:
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: 100%;
height: 100%;
}
.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://unpkg.com/swiper#6.4.8/swiper-bundle.min.css">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper#6.4.8/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
//initialize swiper when document ready
var swiper = new Swiper ('.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
breakpoints: {
480: {
slidesPerView: 4,
spaceBetween: 40,
},
640: {
slidesPerView: 5,
spaceBetween: 50,
}
},
// Optional parameters
})
</script>
Follow this demo:
https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html
https://stackblitz.com/edit/swiper-demo-37-responsive-breakpoints?file=index.html
for React you can use this
<Swiper
breakpoints={{
320: { slidesPerView: 2, spaceBetween: 80 },
480: { slidesPerView: 3, spaceBetween: 150 },
768: { slidesPerView: 3, spaceBetween: 50 },
1024: { slidesPerView: 6, spaceBetween: 150 },
}}
freeMode
centeredSlides
grabCursor
centeredSlidesBounds
modules={[FreeMode, Scrollbar]}
>
{[1, 2, 3, 4, 5, 6, 7, 9, 8]?.map((i) => (
<SwiperSlide key={i}>
<SmallCard />
</SwiperSlide>
))}
</Swiper>
Related
i try to make design like image below.
i set the initial slide on "1". i want to make the swiper navigation disable on index "1".
can you please to figure it out how?
i already try so many answer on stack overflow, but still can't.
here's my code.
//Initialize Swiper
var swiper = new Swiper('.swiper-container.other-adventure', {
autoHeight: true,
initialSlide: 1,
slidesPerView: 4,
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
480: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
1024: {
slidesPerView: 4,
spaceBetween: 15,
},
2560: {
slidesPerView: 4,
spaceBetween: 15,
},
}
});
It's hard to know what you're trying to do (Your design and the code you added not match).
Anyway, this is the outline for "doing something" on some index.
swiper API slideChange & realIndex
One way is simply to use swiper API slideChange event and realIndex property and On slide change if realIndex == 0... do something.
Docs:
https://swiperjs.com/swiper-api#methods-and-properties
https://swiperjs.com/swiper-api#events
** First item has an index of 0.
<script>
/* hide left arrow on load (Another option is to put this code inside init event) */
var arrow = document.getElementsByClassName('swiper-button-prev')[0];
arrow.style.display = 'none';
/* Swiper API - if index = 1 hide left arrow / otherwise show */
swiper.on('slideChange', function() {
var realIndex = swiper.realIndex;
if (realIndex == 0) {
console.log(realIndex + " - hide arrow");
arrow.style.display = 'none';
} else {
console.log(realIndex + " - show arrow");
arrow.style.display = 'block';
}
});
</script>
Full code example:
html, body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
height: 500px;
}
.swiper-container {
width: 100%;
height: 100px;
}
.swiper-slide {
text-align: center;
font-size: 24px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-slide-active{
background: red;
}
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper#6.2.0/swiper-bundle.min.css">
</head>
<body>
<!-- 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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper#6.2.0/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
initialSlide: 1,
slidesPerView: 3,
spaceBetween: 20,
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
/* hide left arrow by deafult */
var arrow = document.getElementsByClassName('swiper-button-prev')[0];
arrow.style.display = 'none';
/* Swiper API - if index = 1 hide left arrow / otherwise show */
swiper.on('slideChange', function() {
var realIndex = swiper.realIndex;
if (realIndex == 0) {
console.log("real index:" + realIndex + " - hide arrow");
arrow.style.display = 'none';
} else {
console.log("real index:" + realIndex + " - show arrow");
arrow.style.display = 'block';
}
});
</script>
Show/hide by simple js:
https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/
first of all thank you for your time because I spent all the morning on this issue. How use the https://idangero.us/swiper module on vue.JS ? Indeed Swiper is on the page but the parameters seems to be not taken in count.
I tried also vue awesome swiper but I prefer use the official version without bug. I tried to init swiper also in a const just after the import.
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<v-touch
#tap="navigateTo(item)"
v-for="item in subList"
:key="item._id"
class="swiper-slide"
>
{{t(item.sentence)}}
</v-touch>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import 'swiper/dist/js/swiper.js'
export default {
name: 'category',
data () {
return {
subList: [{some data}],
}
},
mounted () {
this.initSwiper()
},
methods: {
initSwiper () {
const mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 50
})
mySwiper.init()
}
}
}
</script>
<style scoped>
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
border: solid 2px white;
width: 200px;
height: 200px;
}
</style>
For example with this code I need to have a space between each div or only 2 lines but i have no space and 3 lines... Thank you for your help.
You can now use this Vue Awesome Swiper it has everything you need
you can install it using the following command
npm install swiper vue-awesome-swiper --save
Disclaimer: I have no affiliation nor a contributor to this package, I'm just merely using it. so I recommend it
You can simply use ref to init the slider like so:
<template>
<div>
<div ref="mySlider" class="swiper-container">
…
</div>
<button #click="next">Next Slide</div>
</div>
</template>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
data () {
return {
slider: null,
mySliderOptions: {
loop: true
}
}
},
methods: {
next() {
this.slider.slideNext()
}
}
mounted () {
this.slider = new Swiper(this.$refs.mySlider, this.mySliderOptions)
}
}
Update
They just released an official vue.js swiper component (only vue.js 3)
This seem to work, not sure if it is a good way to do it
Parent
<Swiper
:options="carouselOptions"
/>
Child (Swiper.vue)
<div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">...
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default: () => {
return {
slidesPerView: 1
}
}
}
},
data() {
return {
swiper: null,
}
},
mounted() {
let vm = this;
if (this.options && vm.$refs.swiper !== 'undefined') {
vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
this.swiper = new Swiper(vm.$refs.swiper, {
slidesPerView: this.options.slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
},
resize: function () {
console.log('resize');
}
}
});
}
},
methods: {
}
};
</script>
I had the same problem a long time ago.
Finally, I added Swiper from cdn, it worked well for me.
I made a simple example for you (with Swiper) hope it will help you.
I took all the CSS props + swiper config from here so feel free to play with it.
Let me know if you have any questions :)
You can also check these docs, it has an explanation on how to config it with Vue & React, etc.
new Vue({
el: '#app',
data: {
swiper: null
},
mounted() {
this.swiper = new window.Swiper('.swiper-container', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
mousewheel: true,
keyboard: true,
})
}
})
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: 100%;
height: 100%;
}
.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;
height: 200px !important;
background: pink;
border: 1px solid #888;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<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 class="swiper-slide">Slide 4</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
mounted : function(){
var swiper = new Swiper('.swiper-container', {
slidesPerView: 7,
spaceBetween: 0,
slidesPerGroup: 7
});
},
I just started vuejs today. I got vue "example1" which contain as data, a variable "items". This variable contains an array "deck". This array contains multiple character stats (team, weapon, position...).
I don't know how to figure this out, if you have any solution or any direction where I can find my anwser.
I want on click on the character, to modify the gridColumn position, which is binded by "x". They are displayed on a 9*12 grid.
Thanks a lot.
html, body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#board {
display: grid;
grid-template-columns: repeat(12, 80px);
grid-template-rows: repeat(9, 80px);
grid-gap: 10px;
}
#board .card {
background-color: pink;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<section id="board">
<div class="card" v-for="item in items" v-bind:style="{backgroundColor:item.bg,gridColumn:item.x,gridRow:item.y}" v-on:click="move">
{{ item.clan }}
<br>
{{ item.arme }}
<br>
{{ item.force }}
</div>
</section>
<script>
var deck = [
//natif
{
clan: 'natif',
arme:'filet',
force: 1,
bg: 'green',
x: 2,
y: 6
},
{
clan: 'natif',
arme:'filet',
force: 2,
bg: 'green',
x: 3,
y: 6
}
//etc
];
var example1 = new Vue({
el: '#board',
data: {
items: deck
},
methods: {
move: function () {
// increase "x" value of the clicked item.
}
}
});
</script>
You can pass the index of the item clicked and modify it inside the function by referencing the index.
html, body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#board {
display: grid;
grid-template-columns: repeat(12, 80px);
grid-template-rows: repeat(9, 80px);
grid-gap: 10px;
}
#board .card {
background-color: pink;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<section id="board">
<div class="card" v-for="(item,index) in items" v-bind:style="{backgroundColor:item.bg,gridColumn:item.x,gridRow:item.y}" v-on:click="move(index)">
{{ item.clan }}
<br>
{{ item.arme }}
<br>
{{ item.force }}
</div>
</section>
<script>
var deck = [
//natif
{
clan: 'natif',
arme:'filet',
force: 1,
bg: 'green',
x: 2,
y: 6
},
{
clan: 'natif',
arme:'filet',
force: 2,
bg: 'green',
x: 3,
y: 6
}
//etc
];
var example1 = new Vue({
el: '#board',
data: {
items: deck
},
methods: {
move: function (i) {
this.items = this.items.map((item,indx) => {
if(indx === i)
return ({...item,x: item.x + 1});
return item;
}) //modify logic accordingly
}
}
});
</script>
This is how you do it according to the OFFICIAL VUE.JS DOCUMENTATION
[Mutating the array with Vue.set method]:
var deck = [
//natif
{
clan: 'natif',
arme: 'filet',
force: 1,
bg: 'green',
x: 2,
y: 6
},
{
clan: 'natif',
arme: 'filet',
force: 2,
bg: 'green',
x: 3,
y: 6
}
//etc
];
var example1 = new Vue({
el: '#board',
data: {
items: deck
},
methods: {
move: function(index) {
/* creating a REFERENCE of the clicked item's object */
let modifiedObject = this.items[index];
/* increaseing "x" value of temporary REFERENCE */
modifiedObject.x++;
/* Mutating the items array WITHOUT LOSING REACTIVITY by replacing the existing object with local modified object */
Vue.set(this.items, index, modifiedObject);
}
}
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#board {
border: 1px solid black;
display: grid;
grid-template-columns: repeat(12, 40px);
grid-template-rows: repeat(9, 40px);
grid-gap: 10px;
}
#board .card {
background-color: pink;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<section id="board">
<div class="card" v-for="(item,index) in items" v-bind:style="{backgroundColor:item.bg,gridColumn:item.x,gridRow:item.y}" v-on:click="move(index)">
{{ item.clan }}
<br> {{ item.arme }}
<br> {{ item.force }}
</div>
</section>
I want these three slide background color take turns.
like this: green(1) -> orange(2) -> green(3) - orange(1)...
But current behaviour is not as expected.
How can I fix this?
window.onload = function() {
const defaultOptions = {
speed: 2000,
autoplay: true,
spaceBetween: 4,
direction: 'vertical',
loop: true,
slidesPerView: 'auto',
watchSlidesVisibility: true
};
const swiper = new Swiper('.swiper-container', defaultOptions)
}
.swiper-container{
height: 52px;
}
.swiper-slide{
display: inline-block;
width: auto;
height: 26px;
max-width: 100%;
padding: 0 10px;
}
<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script>
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background: green'>message 1</div>
<div class='swiper-slide' style='background: orange'>message 2</div>
<div class='swiper-slide' style='background: green'>message 3</div>
</div>
</div>
You can set the background color on alternate slides but the real trick is toggling them when the duplicate slides are regenerated for the looping functionality.
I've modified your supplied code with a variable to track progress and a test condition when the slides begin to change.
window.onload = function() {
var lastIndex = 0;
const defaultOptions = {
speed: 2000,
autoplay: true,
spaceBetween: 4,
direction: 'vertical',
loop: true,
slidesPerView: 'auto',
watchSlidesVisibility: true,
onSlideNextStart: function(swiperObj) {
if ( swiperObj.activeIndex < lastIndex ) {
swiperObj.container[0].classList.toggle('alt-bg');
}
lastIndex = swiperObj.activeIndex;
}
};
const swiper = new Swiper('.swiper-container', defaultOptions)
}
.swiper-container{
height: 52px;
}
.swiper-slide{
display: inline-block;
width: auto;
height: 26px;
max-width: 100%;
padding: 0 10px;
background: green;
}
.swiper-slide:nth-child(2n+1){
background: orange;
}
.alt-bg .swiper-slide{
background: orange;
}
.alt-bg .swiper-slide:nth-child(2n+1){
background: green;
}
<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script>
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>message 1</div>
<div class='swiper-slide'>message 2</div>
<div class='swiper-slide'>message 3</div>
</div>
</div>
In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/)
I need change default dots nav for words. Slides should be changed after clicking on the words.
Here is the Updated Code and check my example in CODEPEN
$(".slider").slick({
autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a class="dot">'+i+'</a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
.frst{
background: #3a8999;
}
.scnd{
background: #e84a69;
}
.thrd{
background: #980505;
}
.frth{
background: #094602;
}
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black !important;
}
.slick-dots {
bottom: -30px;
}
a.dot{
padding:10px 10px;
}
a.dot:hover{
background:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<section class="slider">
<div class="frst">slide1</div>
<div class="scnd">slide2</div>
<div class="thrd">slide3</div>
<div class="frth">slide4</div>
<div class="frst">slide5</div>
<div class="thrd">slide6</div>
</section>
<span class="pagingInfo"></span>