Unidirectional Bootstrap 3 carousel Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)jQuery image carouselCarousel for websiteTwitter-bootstrap add-onThumbnails for bootstrap carousel jQuery pluginBootstrap Tabs With SammyJsBootstrap Data Table generationBootstrap show many move one carousel modificationBootstrap WordPress Carousel Recent PostsBootstrap responsive layoutBootstrap file input stylerHTML/bootstrap demo page
What are the motives behind Cersei's orders given to Bronn?
Did Xerox really develop the first LAN?
WAN encapsulation
Should I call the interviewer directly, if HR aren't responding?
What's the purpose of writing one's academic bio in 3rd person?
Is a manifold-with-boundary with given interior and non-empty boundary essentially unique?
Why is high voltage dangerous?
ListPlot join points by nearest neighbor rather than order
Is above average number of years spent on PhD considered a red flag in future academia or industry positions?
How can whole tone melodies sound more interesting?
What makes black pepper strong or mild?
What does '1 unit of lemon juice' mean in a grandma's drink recipe?
3 doors, three guards, one stone
Is there a documented rationale why the House Ways and Means chairman can demand tax info?
Is it true that "carbohydrates are of no use for the basal metabolic need"?
Why does Python start at index 1 when iterating an array backwards?
What is this single-engine low-wing propeller plane?
Bonus calculation: Am I making a mountain out of a molehill?
What happens to sewage if there is no river near by?
IndentationError when pasting code in Python 3 interpreter mode
Right-skewed distribution with mean equals to mode?
How much radiation do nuclear physics experiments expose researchers to nowadays?
How discoverable are IPv6 addresses and AAAA names by potential attackers?
How do I stop a creek from eroding my steep embankment?
Unidirectional Bootstrap 3 carousel
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)jQuery image carouselCarousel for websiteTwitter-bootstrap add-onThumbnails for bootstrap carousel jQuery pluginBootstrap Tabs With SammyJsBootstrap Data Table generationBootstrap show many move one carousel modificationBootstrap WordPress Carousel Recent PostsBootstrap responsive layoutBootstrap file input stylerHTML/bootstrap demo page
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
$begingroup$
I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions.
I want to prevent slide transitions from overlapping when the bullets are clicked in random order and rapid succession.
I came up with this solution that relies on disabling them as long as a slide transition is in progress, then enabling them between transitions:
var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>Still, I am looking for a queuing mechanism, as it is more natural and elegant.
javascript jquery css animation twitter-bootstrap
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
$endgroup$
add a comment |
$begingroup$
I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions.
I want to prevent slide transitions from overlapping when the bullets are clicked in random order and rapid succession.
I came up with this solution that relies on disabling them as long as a slide transition is in progress, then enabling them between transitions:
var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>Still, I am looking for a queuing mechanism, as it is more natural and elegant.
javascript jquery css animation twitter-bootstrap
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
$endgroup$
add a comment |
$begingroup$
I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions.
I want to prevent slide transitions from overlapping when the bullets are clicked in random order and rapid succession.
I came up with this solution that relies on disabling them as long as a slide transition is in progress, then enabling them between transitions:
var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>Still, I am looking for a queuing mechanism, as it is more natural and elegant.
javascript jquery css animation twitter-bootstrap
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
$endgroup$
I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions.
I want to prevent slide transitions from overlapping when the bullets are clicked in random order and rapid succession.
I came up with this solution that relies on disabling them as long as a slide transition is in progress, then enabling them between transitions:
var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>Still, I am looking for a queuing mechanism, as it is more natural and elegant.
var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>var carouselDuration = function()
$.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'none');
);
// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e)
var $indicator = $(this).find('.carousel-indicators>li');
$indicator.css('pointer-events', 'auto');
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
top: 0;
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
top: 0;
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>javascript jquery css animation twitter-bootstrap
javascript jquery css animation twitter-bootstrap
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
edited Nov 21 '18 at 20:19
Sᴀᴍ Onᴇᴌᴀ
10.6k62168
10.6k62168
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
asked Nov 13 '18 at 13:19
Razvan ZamfirRazvan Zamfir
12212
12212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$begingroup$
Feedback
The code seems fairly concise, though I do have suggestions below that can simplify it even more. I was hoping there was some class name applied to the element with class carousel during the slide transition but apparently the bootstrap code does not do that, though you could use the event callback functions to apply the class name yourself. That way the CSS style for pointer-events can be moved into the CSS.
Because the .on() method accepts multiple events separated by a space, you can use one call for both events, and a single Partially applied function to call the .toggleClass() method, which will add and then remove a class to the carousel element:
var carouselCollection = $('#myCarousel');
carouselCollection.on('slide.bs.carousel slid.bs.carousel',
carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
Then the CSS can contain the style:
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
See that working in the rewritten code below.
I don't see much point in creating the function carouselDuration() and calling it immediately afterwards but then never again. Why not just move that single line out where it is called? I could see a point in doing that after some condition is met (e.g. DOM ready, jQuery/carousel ready, etc).
Some of the CSS rulesets are a bit redundant. For instance, some of the top: 0 rulesets should be cascadable from .carousel.vertical .carousel-inner>.item and apply to the next three subsequent selectors.
Also, I believe I was able to remove this block without any adverse affects. Are there really elements with class .right and .left or are those for the left/right controls that aren't being used?
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
Suggestions
It would likely help to define that value for the duration as a constant (and if you are using ecmascript-6 then use const) at the top of the code, so it can be easily modified in the future if necessary.
While there are only a couple redundant DOM queries (e.g. $(#myCarousel)) it would be wise to cache those in a variable.
The event handler functions are very redundant, and violate the Don't Repeat Yourself principle. The only thing that appears to change is the value assigned to the CSS style pointer-events. If the approach mentioned above with the .toggleClass() method doesn't work, the common code in the two callback functions could be abstracted into a single function that accepts the value for that CSS style, and then Partially applied functions could be created with Function.bind() to fix the value to apply to the style.
var carouselCollection = $('#myCarousel');
function setPointerEventsOnListItems(value, e)
var $indicator = carouselCollection.find('.carousel-indicators>li');
$indicator.css('pointer-events', value);
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel', setPointerEventsOnListItems.bind(null, 'none'));
// While a transition has finished (slid event), do this
carouselCollection.on('slid.bs.carousel', setPointerEventsOnListItems.bind(null, 'auto'));
As you likely know, the jQuery DOM ready function would be good to use so as to avoid accidentally accessing the DOM before it is ready (though that isn't a problem as much nowdays with modern browsers and adding the script tags to the end of the <body>). An IIFE could also be used instead of that jQuery DOM ready callback.
Rewritten code
The code below utilizes the advice above, though utilizes the .toggleClass() method.
var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
$endgroup$
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
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: "196"
;
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',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f207554%2funidirectional-bootstrap-3-carousel%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$begingroup$
Feedback
The code seems fairly concise, though I do have suggestions below that can simplify it even more. I was hoping there was some class name applied to the element with class carousel during the slide transition but apparently the bootstrap code does not do that, though you could use the event callback functions to apply the class name yourself. That way the CSS style for pointer-events can be moved into the CSS.
Because the .on() method accepts multiple events separated by a space, you can use one call for both events, and a single Partially applied function to call the .toggleClass() method, which will add and then remove a class to the carousel element:
var carouselCollection = $('#myCarousel');
carouselCollection.on('slide.bs.carousel slid.bs.carousel',
carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
Then the CSS can contain the style:
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
See that working in the rewritten code below.
I don't see much point in creating the function carouselDuration() and calling it immediately afterwards but then never again. Why not just move that single line out where it is called? I could see a point in doing that after some condition is met (e.g. DOM ready, jQuery/carousel ready, etc).
Some of the CSS rulesets are a bit redundant. For instance, some of the top: 0 rulesets should be cascadable from .carousel.vertical .carousel-inner>.item and apply to the next three subsequent selectors.
Also, I believe I was able to remove this block without any adverse affects. Are there really elements with class .right and .left or are those for the left/right controls that aren't being used?
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
Suggestions
It would likely help to define that value for the duration as a constant (and if you are using ecmascript-6 then use const) at the top of the code, so it can be easily modified in the future if necessary.
While there are only a couple redundant DOM queries (e.g. $(#myCarousel)) it would be wise to cache those in a variable.
The event handler functions are very redundant, and violate the Don't Repeat Yourself principle. The only thing that appears to change is the value assigned to the CSS style pointer-events. If the approach mentioned above with the .toggleClass() method doesn't work, the common code in the two callback functions could be abstracted into a single function that accepts the value for that CSS style, and then Partially applied functions could be created with Function.bind() to fix the value to apply to the style.
var carouselCollection = $('#myCarousel');
function setPointerEventsOnListItems(value, e)
var $indicator = carouselCollection.find('.carousel-indicators>li');
$indicator.css('pointer-events', value);
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel', setPointerEventsOnListItems.bind(null, 'none'));
// While a transition has finished (slid event), do this
carouselCollection.on('slid.bs.carousel', setPointerEventsOnListItems.bind(null, 'auto'));
As you likely know, the jQuery DOM ready function would be good to use so as to avoid accidentally accessing the DOM before it is ready (though that isn't a problem as much nowdays with modern browsers and adding the script tags to the end of the <body>). An IIFE could also be used instead of that jQuery DOM ready callback.
Rewritten code
The code below utilizes the advice above, though utilizes the .toggleClass() method.
var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
$endgroup$
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
add a comment |
$begingroup$
Feedback
The code seems fairly concise, though I do have suggestions below that can simplify it even more. I was hoping there was some class name applied to the element with class carousel during the slide transition but apparently the bootstrap code does not do that, though you could use the event callback functions to apply the class name yourself. That way the CSS style for pointer-events can be moved into the CSS.
Because the .on() method accepts multiple events separated by a space, you can use one call for both events, and a single Partially applied function to call the .toggleClass() method, which will add and then remove a class to the carousel element:
var carouselCollection = $('#myCarousel');
carouselCollection.on('slide.bs.carousel slid.bs.carousel',
carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
Then the CSS can contain the style:
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
See that working in the rewritten code below.
I don't see much point in creating the function carouselDuration() and calling it immediately afterwards but then never again. Why not just move that single line out where it is called? I could see a point in doing that after some condition is met (e.g. DOM ready, jQuery/carousel ready, etc).
Some of the CSS rulesets are a bit redundant. For instance, some of the top: 0 rulesets should be cascadable from .carousel.vertical .carousel-inner>.item and apply to the next three subsequent selectors.
Also, I believe I was able to remove this block without any adverse affects. Are there really elements with class .right and .left or are those for the left/right controls that aren't being used?
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
Suggestions
It would likely help to define that value for the duration as a constant (and if you are using ecmascript-6 then use const) at the top of the code, so it can be easily modified in the future if necessary.
While there are only a couple redundant DOM queries (e.g. $(#myCarousel)) it would be wise to cache those in a variable.
The event handler functions are very redundant, and violate the Don't Repeat Yourself principle. The only thing that appears to change is the value assigned to the CSS style pointer-events. If the approach mentioned above with the .toggleClass() method doesn't work, the common code in the two callback functions could be abstracted into a single function that accepts the value for that CSS style, and then Partially applied functions could be created with Function.bind() to fix the value to apply to the style.
var carouselCollection = $('#myCarousel');
function setPointerEventsOnListItems(value, e)
var $indicator = carouselCollection.find('.carousel-indicators>li');
$indicator.css('pointer-events', value);
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel', setPointerEventsOnListItems.bind(null, 'none'));
// While a transition has finished (slid event), do this
carouselCollection.on('slid.bs.carousel', setPointerEventsOnListItems.bind(null, 'auto'));
As you likely know, the jQuery DOM ready function would be good to use so as to avoid accidentally accessing the DOM before it is ready (though that isn't a problem as much nowdays with modern browsers and adding the script tags to the end of the <body>). An IIFE could also be used instead of that jQuery DOM ready callback.
Rewritten code
The code below utilizes the advice above, though utilizes the .toggleClass() method.
var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
$endgroup$
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
add a comment |
$begingroup$
Feedback
The code seems fairly concise, though I do have suggestions below that can simplify it even more. I was hoping there was some class name applied to the element with class carousel during the slide transition but apparently the bootstrap code does not do that, though you could use the event callback functions to apply the class name yourself. That way the CSS style for pointer-events can be moved into the CSS.
Because the .on() method accepts multiple events separated by a space, you can use one call for both events, and a single Partially applied function to call the .toggleClass() method, which will add and then remove a class to the carousel element:
var carouselCollection = $('#myCarousel');
carouselCollection.on('slide.bs.carousel slid.bs.carousel',
carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
Then the CSS can contain the style:
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
See that working in the rewritten code below.
I don't see much point in creating the function carouselDuration() and calling it immediately afterwards but then never again. Why not just move that single line out where it is called? I could see a point in doing that after some condition is met (e.g. DOM ready, jQuery/carousel ready, etc).
Some of the CSS rulesets are a bit redundant. For instance, some of the top: 0 rulesets should be cascadable from .carousel.vertical .carousel-inner>.item and apply to the next three subsequent selectors.
Also, I believe I was able to remove this block without any adverse affects. Are there really elements with class .right and .left or are those for the left/right controls that aren't being used?
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
Suggestions
It would likely help to define that value for the duration as a constant (and if you are using ecmascript-6 then use const) at the top of the code, so it can be easily modified in the future if necessary.
While there are only a couple redundant DOM queries (e.g. $(#myCarousel)) it would be wise to cache those in a variable.
The event handler functions are very redundant, and violate the Don't Repeat Yourself principle. The only thing that appears to change is the value assigned to the CSS style pointer-events. If the approach mentioned above with the .toggleClass() method doesn't work, the common code in the two callback functions could be abstracted into a single function that accepts the value for that CSS style, and then Partially applied functions could be created with Function.bind() to fix the value to apply to the style.
var carouselCollection = $('#myCarousel');
function setPointerEventsOnListItems(value, e)
var $indicator = carouselCollection.find('.carousel-indicators>li');
$indicator.css('pointer-events', value);
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel', setPointerEventsOnListItems.bind(null, 'none'));
// While a transition has finished (slid event), do this
carouselCollection.on('slid.bs.carousel', setPointerEventsOnListItems.bind(null, 'auto'));
As you likely know, the jQuery DOM ready function would be good to use so as to avoid accidentally accessing the DOM before it is ready (though that isn't a problem as much nowdays with modern browsers and adding the script tags to the end of the <body>). An IIFE could also be used instead of that jQuery DOM ready callback.
Rewritten code
The code below utilizes the advice above, though utilizes the .toggleClass() method.
var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
$endgroup$
Feedback
The code seems fairly concise, though I do have suggestions below that can simplify it even more. I was hoping there was some class name applied to the element with class carousel during the slide transition but apparently the bootstrap code does not do that, though you could use the event callback functions to apply the class name yourself. That way the CSS style for pointer-events can be moved into the CSS.
Because the .on() method accepts multiple events separated by a space, you can use one call for both events, and a single Partially applied function to call the .toggleClass() method, which will add and then remove a class to the carousel element:
var carouselCollection = $('#myCarousel');
carouselCollection.on('slide.bs.carousel slid.bs.carousel',
carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
Then the CSS can contain the style:
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
See that working in the rewritten code below.
I don't see much point in creating the function carouselDuration() and calling it immediately afterwards but then never again. Why not just move that single line out where it is called? I could see a point in doing that after some condition is met (e.g. DOM ready, jQuery/carousel ready, etc).
Some of the CSS rulesets are a bit redundant. For instance, some of the top: 0 rulesets should be cascadable from .carousel.vertical .carousel-inner>.item and apply to the next three subsequent selectors.
Also, I believe I was able to remove this block without any adverse affects. Are there really elements with class .right and .left or are those for the left/right controls that aren't being used?
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right
transform: translate3d(0, 100%, 0);
top: 0;
Suggestions
It would likely help to define that value for the duration as a constant (and if you are using ecmascript-6 then use const) at the top of the code, so it can be easily modified in the future if necessary.
While there are only a couple redundant DOM queries (e.g. $(#myCarousel)) it would be wise to cache those in a variable.
The event handler functions are very redundant, and violate the Don't Repeat Yourself principle. The only thing that appears to change is the value assigned to the CSS style pointer-events. If the approach mentioned above with the .toggleClass() method doesn't work, the common code in the two callback functions could be abstracted into a single function that accepts the value for that CSS style, and then Partially applied functions could be created with Function.bind() to fix the value to apply to the style.
var carouselCollection = $('#myCarousel');
function setPointerEventsOnListItems(value, e)
var $indicator = carouselCollection.find('.carousel-indicators>li');
$indicator.css('pointer-events', value);
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel', setPointerEventsOnListItems.bind(null, 'none'));
// While a transition has finished (slid event), do this
carouselCollection.on('slid.bs.carousel', setPointerEventsOnListItems.bind(null, 'auto'));
As you likely know, the jQuery DOM ready function would be good to use so as to avoid accidentally accessing the DOM before it is ready (though that isn't a problem as much nowdays with modern browsers and adding the script tags to the end of the <body>). An IIFE could also be used instead of that jQuery DOM ready callback.
Rewritten code
The code below utilizes the advice above, though utilizes the .toggleClass() method.
var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>var DURATION = 1000; //could use const instead of var if supporting es-6
$(function() //DOM ready callback
$.fn.carousel.Constructor.TRANSITION_DURATION = DURATION;
var carouselCollection = $('#myCarousel');
// While a transition is in progress (slide event), do this
carouselCollection.on('slide.bs.carousel slid.bs.carousel', carouselCollection.toggleClass.bind(carouselCollection, 'sliding'));
);.carousel.vertical
position: relative;
.carousel.vertical .carousel-inner
height: 100%;
width: auto;
.carousel.vertical .carousel-inner>.item
width: auto;
transition: 1s ease-in-out;
transform: translate3d(0, 100%, 0);
top: 0;
.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active
transform: translate3d(0, 0, 0);
.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left
transform: translate3d(0, -100%, 0);
.carousel.vertical .carousel-indicators
display: inline-block;
width: auto;
padding: 0;
margin: 0;
left: auto;
right: 10px;
bottom: 2px;
z-index: 9;
font-size: 0;
.carousel.vertical .carousel-indicators li
border: none;
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-indent: -9999px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
.carousel.vertical.sliding .carousel-indicators li
pointer-events: none;
.carousel.vertical .carousel-indicators li.active
background-position: -528px -524px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div>answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
edited 5 mins ago
answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
answered Nov 21 '18 at 20:19
Sᴀᴍ OnᴇᴌᴀSᴀᴍ Onᴇᴌᴀ
10.6k62168
10.6k62168
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
add a comment |
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Thank a lot for the feedback and the effort to rewrite the code. Can you help with the queuing mechanism or some other solution that would make the slider more user-friendly, meaning the the user would not have to click (temporarily) inactive bullets?
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:04
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
Please provide an answer to the topic An improvable use case of the Swiper slider. Thanks!
$endgroup$
– Razvan Zamfir
Nov 27 '18 at 11:10
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
$begingroup$
I hope you don’t get the wrong impression about this site, though maybe you have, since many answers offer a rewrite- especially easy with questions involving JS because snippets make it simple for demonstrating. Requests for code implementations are off-topic for this site.
$endgroup$
– Sᴀᴍ Onᴇᴌᴀ
Nov 27 '18 at 11:55
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f207554%2funidirectional-bootstrap-3-carousel%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
