Owl-carousel - Start/Stop roulette animation on page load
up vote
0
down vote
favorite
i want to set up the following owl-carousel to start automaticly when the page is loaded. I tried to do this with these variables:
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed:100,
but then the roulette animation wont stop anymore. When i click the button "Jump" the normal animation starts and stops at the number i set in the js varialbe "itemSelected".
How can i build this "roulette" animation so it starts when the page is loaded and stops at the value i set in the var "itemSelected"?
Thanks for your help and time, Dave
var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>javascript jquery owl-carousel
asked Nov 8 at 19:25
Dave
32
add a comment |
up vote
0
down vote
favorite
i want to set up the following owl-carousel to start automaticly when the page is loaded. I tried to do this with these variables:
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed:100,
but then the roulette animation wont stop anymore. When i click the button "Jump" the normal animation starts and stops at the number i set in the js varialbe "itemSelected".
How can i build this "roulette" animation so it starts when the page is loaded and stops at the value i set in the var "itemSelected"?
Thanks for your help and time, Dave
var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>javascript jquery owl-carousel
asked Nov 8 at 19:25
Dave
32
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
i want to set up the following owl-carousel to start automaticly when the page is loaded. I tried to do this with these variables:
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed:100,
but then the roulette animation wont stop anymore. When i click the button "Jump" the normal animation starts and stops at the number i set in the js varialbe "itemSelected".
How can i build this "roulette" animation so it starts when the page is loaded and stops at the value i set in the var "itemSelected"?
Thanks for your help and time, Dave
var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>javascript jquery owl-carousel
asked Nov 8 at 19:25
Dave
32
i want to set up the following owl-carousel to start automaticly when the page is loaded. I tried to do this with these variables:
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed:100,
but then the roulette animation wont stop anymore. When i click the button "Jump" the normal animation starts and stops at the number i set in the js varialbe "itemSelected".
How can i build this "roulette" animation so it starts when the page is loaded and stops at the value i set in the var "itemSelected"?
Thanks for your help and time, Dave
var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 100,
autoplaySpeed: 100,
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = 8;
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
//slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}.owl-carousel .item {
height: 200px;
width: auto;
background: #4DC7A0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
.btn-jump::after {
content: '';
position: absolute;
left: 44%;
top: -30%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #2b3843;
clear: both;
}
.btn-jump {
z-index: 999;
margin-top: 5px;
width: 300px;
position: relative;
background-color: #2b3843;
color: white;
padding: 20px;
}
.wrap-jump {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Owl Roulette</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="assets/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="assets/roulette.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item element-roulette" data-item="1"><h4>1</h4></div>
<div class="item element-roulette" data-item="2"><h4>2</h4></div>
<div class="item element-roulette" data-item="3"><h4>3</h4></div>
<div class="item element-roulette" data-item="4"><h4>4</h4></div>
<div class="item element-roulette" data-item="5"><h4>5</h4></div>
<div class="item element-roulette" data-item="6"><h4>6</h4></div>
<div class="item element-roulette" data-item="7"><h4>7</h4></div>
<div class="item element-roulette" data-item="8"><h4>8</h4></div>
<div class="item element-roulette" data-item="9"><h4>9</h4></div>
<div class="item element-roulette" data-item="10"><h4>10</h4></div>
</div>
<div class="wrap-jump">
<button class="btn-jump" id="js-btn-jump">Jump</button>
</div>
</body>
</html>javascript jquery owl-carousel
javascript jquery owl-carousel
asked Nov 8 at 19:25
Dave
32
asked Nov 8 at 19:25
Dave
32
asked Nov 8 at 19:25
Dave
32
asked Nov 8 at 19:25
Dave
32
asked Nov 8 at 19:25
Dave
32
32
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
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%2fstackoverflow.com%2fquestions%2f53214791%2fowl-carousel-start-stop-roulette-animation-on-page-load%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');
});
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');
});
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');
});
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
