Making Swiper slider's transition unidirectional

up vote
1
down vote

favorite

I have put together an image carousel with the help of Swiper.

My carousel uses background images, bullets and vertical transition. I what this vertical transition to be unidirectional. In the words, the carousel transition direction should be upwards, regardless of the succession of the bullets clicked.

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

add a comment |

up vote
1
down vote

favorite

I have put together an image carousel with the help of Swiper.

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

add a comment |

up vote
1
down vote

favorite

I have put together an image carousel with the help of Swiper.

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

I have put together an image carousel with the help of Swiper.

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

var swiper = new Swiper('.swiper-container', 
 direction: 'vertical',
 auto: true,
 speed: 1000,
 loop: true,
 autoplay: 
 delay: 9000,
 disableOnInteraction: false,
 ,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 ,
 controller: 
 inverse: true,
 
);

.swiper-container 
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 265px;


.swiper-wrapper 
 height: 265px;


.swiper-slide 
 transition: 1s ease-in-out;
 top: 0;
 width: 100%;
 height: 265px;
 background-repeat: no-repeat;
 background-position: center center;


.swiper-slide img 
 margin: 0 auto;
 width: 620px;
 height: 265px;


.swiper-container-vertical>.swiper-pagination-bullets 
 bottom: 0;
 top: auto !important;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet 
 margin: 0 !important;
 outline: none;
 opacity: 1;
 float: left;
 width: 18px;
 height: 18px;
 background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;


.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active 
 background-position: -528px -524px;

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>

<div class="swiper-container">
 <div class="swiper-wrapper">
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
 <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
 </a>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
</div>

javascript html css carousel swipe

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

edited Oct 31 at 10:42

asked Oct 31 at 7:21

Razvan Zamfir

7261954

asked Oct 31 at 7:21

Razvan Zamfir

7261954

asked Oct 31 at 7:21

Razvan Zamfir

7261954

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

Maybe this will help you, pass the parameter allowSlidePrev: false;.

I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53078201%2fmaking-swiper-sliders-transition-unidirectional%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

Maybe this will help you, pass the parameter allowSlidePrev: false;.

I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

add a comment |

up vote
0
down vote

Maybe this will help you, pass the parameter allowSlidePrev: false;.

I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

add a comment |

up vote
0
down vote

Maybe this will help you, pass the parameter allowSlidePrev: false;.

I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

Maybe this will help you, pass the parameter allowSlidePrev: false;.

I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

edited Nov 10 at 11:16

Razvan Zamfir

7261954

edited Nov 10 at 11:16

Razvan Zamfir

7261954

edited Nov 10 at 11:16

Razvan Zamfir

7261954

answered Nov 9 at 23:24

Daniel Ferreira

205

answered Nov 9 at 23:24

Daniel Ferreira

205

answered Nov 9 at 23:24

Daniel Ferreira

205

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

add a comment |

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

It did not change anything. But Thanks!
– Razvan Zamfir
Nov 10 at 10:54

this won't make it unidirectional, it will only disable the ability of user to navigate to previous slides, so user can only go to next slides by navigating through bullets, but the requirement was to be able to navigate to any slide with bullets and change the slide effect only one directional ( or unidirectional). Example, user clicks on the previous slide, still the slide effect looks like as if it's sliding to the next element.
– Towkir Ahmed
Nov 10 at 15:14

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth