I am using the slick slider library. On page load, my slider wrapper is set to display: none. When I click my trigger click button, it then shows the slider, but the first slide doesn't show. Then when the second slide shows, the height isn't correct.
I have read through articles that share my issue, such as this one:
https://github.com/kenwheeler/slick/issues/158
Here is the library:
https://github.com/kenwheeler/slick
I have tried initializing the slider and then adding visibility: visible to it, but that does not seem to work.
Does anyone see or know what I have to add to get the first slide to fully show after being triggered?
Here is a fiddle which shows the issue I am having.
$('#trigger').on('click', function() {
$('#pg-preview-wrap').show();
});
$('#calendar-select').on('init', function() {
$('#calendar-select').css("visibility", "visible");
$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
#pg-preview-wrap {
display: none;
}
#calendar-select {
width: 50%;
margin: 0 auto 70px auto;
background: #CCC;
visibility: hidden;
height: auto;
}
.no-fouc {
display: none;
}
.slick-initialized {
visibility: visible;
}
.slick-slide img.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.slick-slide img.pg-preview-img {
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
display: block;
}
.calendar-option-push {
width: 0;
height: 20px;
border: none;
margin: 20px auto;
}
.calendar-option cite {
text-align: center;
font-size: 1.25rem;
margin: auto;
color: #303030;
font-family: 'Lato', sans-serif;
display: block;
}
.slick-prev,
.slick-next {
background-repeat: no-repeat;
background-size: 120px 120px;
height: 120px;
width: 120px;
}
.slick-prev {
left: -130px;
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-repeat: no-repeat;
background-size: 120px 120px;
}
.slick-next {
right: -130px;
background-image: url("images/arrow-forward.png");
}
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-image: url("images/arrow-forward.png");
}
.slick-prev:before,
.slick-next:before {
font-size: 0px;
}
.slick-dots {
margin: 15px 0 20px 0;
}
.white-back {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: #FFF;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
<div id="calendar-select">
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="checkbox" class="option-check" id='flag-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="checkbox" class="option-check" id='nickel-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="gold-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>C</cite>
</label>
<input type="checkbox" class="option-check" id='gold-option'>
</div>
</div>
</div>
</div>
Probably not a straight forward solution to your problem, you could destroy and reinitialize the slider after it's visible.
var options = {
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
}
$('#trigger').on('click', function() {
$('#pg-preview-wrap').show();
$('#calendar-select').slick('unslick');
$('#calendar-select').slick(options);
});
$('#calendar-select').on('init', function() {
//$('#calendar-select').css("visibility", "visible");
//$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick(options);
#pg-preview-wrap {
display: none;
}
#calendar-select {
width: 50%;
margin: 0 auto 70px auto;
background: #CCC;
height: auto;
}
.no-fouc {
display: none;
}
.slick-initialized {
visibility: visible;
}
.slick-slide img.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.slick-slide img.pg-preview-img {
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
display: block;
}
.calendar-option-push {
width: 0;
height: 20px;
border: none;
margin: 20px auto;
}
.calendar-option cite {
text-align: center;
font-size: 1.25rem;
margin: auto;
color: #303030;
font-family: 'Lato', sans-serif;
display: block;
}
.slick-prev,
.slick-next {
background-repeat: no-repeat;
background-size: 120px 120px;
height: 120px;
width: 120px;
}
.slick-prev {
left: -130px;
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-repeat: no-repeat;
background-size: 120px 120px;
}
.slick-next {
right: -130px;
background-image: url("images/arrow-forward.png");
}
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-image: url("images/arrow-forward.png");
}
.slick-prev:before,
.slick-next:before {
font-size: 0px;
}
.slick-dots {
margin: 15px 0 20px 0;
}
.white-back {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slick JS</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<body>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
<div id="calendar-select">
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="checkbox" class="option-check" id='flag-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="checkbox" class="option-check" id='nickel-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="gold-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>C</cite>
</label>
<input type="checkbox" class="option-check" id='gold-option'>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
</body>
</html>
I couldn't find any reInit method, otherwise that could have been used. Here is fiddle of the above code.
You need to use .slick("slickRemove") to remove all the slides you want to replace, and then .slick("slickAdd") to add the new ones. Small examples is below,
` slickSlider: function () {
$('#claim_slider').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
arrows:true
});
}
$(document).ready(function(){
$('.ticket-claims a').on('click', function() {
$('#claim_slider').slick("slickRemove");
$('#claim_slider').slick("slickAdd");
});
});
`
Related
I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.
I am developing a website that contains a series of products, each block contains a certain product, when hovering the mouse I need the name of this product to appear,
However, the product name is stored through an 'DATA' attribute.
for example:
data-legend-item = "White T-Shirt"
I need to collect the value of this data attribute and make it appear every time I hover over it.
Remembering that they are a collection of blocks so I need to collect them from all data-legend-items on the page.
ps: notice that I made a script that only collects this value only from the first blockthat contains a data-legend-item
[
function dataTitleProduct(productItem) {
// collecting data-legend-item main attribute
var productItem = document.getElementById('item-title').getAttribute("data-legend-item");
// pulling the value of the data-legend-item attribute and inserting it in the html
document.querySelector('[data-legend-item]').innerHTML = productItem;
}
dataTitleProduct();
.products {
/* Div pai*/
max-width: 320px;
width: 100%;
}
/* Filhos recebendo distanciamento de 5 margin*/
.products .product-view {
margin: 5px auto;
}
/* */
.products .product-view {
max-width: 200px;
display: flex;
flex-flow: column wrap;
text-align: center;
margin: 0 auto;
}
.product-view .product {
height: 150px;
background-color: #ffffff;
box-shadow: 0 1px 3px #c7c7c7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s ease;
position: relative;
}
.product-view .product:hover {
box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
cursor: pointer;
content: '';
}
/* Titulo do Produto*/
.product-view .product [data-legend-item] {
display: block;
line-height: 220px;
position: relative;
font-size: 1.1rem;
color: #ffffff;
z-index: 1;
}
.product-view .product [data-legend-item]:before {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 90px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
content: '';
}
<div class="products">
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="T-shirt White"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="Shoes"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="Black T-shirt"></div>
</div>
</div>
</div>
]1
I prefer to hide and show using CSS put take a look at this this.
always use id names only once in html file
document.querySelectorAll('.product-view').forEach(e => {
e.addEventListener('mouseover', event => {
let item_title = event.currentTarget.querySelector('.item-title');
item_title.innerText = item_title.dataset.legendItem;
});
e.addEventListener('mouseout', event => {
let item_title = event.currentTarget.querySelector('.item-title');
item_title.innerText = '';
})
})
.products {
/* Div pai*/
max-width: 320px;
width: 100%;
}
/* Filhos recebendo distanciamento de 5 margin*/
.products .product-view {
margin: 5px auto;
}
/* */
.products .product-view {
max-width: 200px;
display: flex;
flex-flow: column wrap;
text-align: center;
margin: 0 auto;
}
.product-view .product {
height: 150px;
background-color: #ffffff;
box-shadow: 0 1px 3px #c7c7c7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s ease;
position: relative;
}
.product-view .product:hover {
box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
cursor: pointer;
content: '';
}
/* Titulo do Produto*/
.product-view .product [data-legend-item] {
display: block;
line-height: 220px;
position: relative;
font-size: 1.1rem;
color: #ffffff;
z-index: 1;
}
.product-view .product [data-legend-item]:before {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 90px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
content: '';
}
<div class="products">
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="T-shirt White"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="Shoes"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="Black T-shirt"></div>
</div>
</div>
</div>
I have this bit of code that changes multiple images on my website. Right now I can change the images once but I can not change them back to the original images. I was trying to use .toggle after my .css to change the images back and fourth but that did not work. How would I go about solving this?
$("button").click(function(){
$("#secriuty").css({"background-image": "url('images/certificates/secriuty-fundamentals-certificate.png')"}),
$("#js").css({"background-image": "url('images/certificates/js-certificate.png')"}),
$("#html5").css({"background-image": "url('images/certificates/html5-certificate.png')"}),
$("#html-css").css({"background-image": "url('images/certificates/html-and-css-certificate.png')"}),
$("#photoshop").css({"background-image": "url('images/certificates/photoshop-certificate.png')"}),
$("#illustrator").css({"background-image": "url('images/certificates/illustrator-certificate.png')"})
});
Try this :
$('.checkbox').click(function() {
const button = $(this).parent('#button');
if( $(button).find('.checkbox').is(':checked') ) {
$("#aaa").css({"background-image": "url('https://picsum.photos/id/141/150/150')"})
$("#bbb").css({"background-image": "url('https://picsum.photos/id/222/150/150')"})
$("#ccc").css({"background-image": "url('https://picsum.photos/id/27/150/150')"})
} else {
$(".div").css({"background-image": ""})
}
})
.gallery {
display: flex;
flex-direction: row;
}
#aaa {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
#bbb {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
#ccc {
display: block;
width: 150px;
height: 150px;
background-image: url('https://picsum.photos/id/121/150/150');
}
.div {
margin-right: 5px;
}
.div:last-of-type {
margin-right: 0;
}
/* Button */
.btn {
width: 150px;
height: 40px;
margin-top: 10px;
background-color: #999;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background: #444;
color: #fff;
}
.btn .checkbox {
position: absolute;
left: 0;
right: 0;
width: 150px;
height: 40px;
opacity: 0;
z-index: 999;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
<div id="aaa" class="div"></div>
<div id="bbb" class="div"></div>
<div id="ccc" class="div"></div>
</div>
<div id="button" class="btn">
<input type="checkbox" class="checkbox" />
<span>Change Background</span>
</div>
Using .toggleClass:
$("button").click(function(){
$("#security").toggleClass("newpic");
});
#security {
height: 100px;
width: 100px;
background: red;
}
#security.newpic {
background: url("http://www.fillmurray.com/300/253");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="security"></div>
<button>Click me</button>
Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
Sorry for asking a pretty common question however I couldn't find how to fix that problem anywhere, and I have no idea how this slideshow works.
I want that slideshow to pause on mouseover and continue on mouseleave.
Here is the code below:
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 4,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager',
});
});`
And the html code for the block:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.dev7studios.com
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
<meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
<title>Carousel with 3 images centered in rounded corners</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script type="text/javascript" src="try.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="img/up1.jpg" />
<img src="img/up2.jpg" />
<img src="img/up3.jpg" />
<img src="img/up1.jpg" />
<img src="img/up4.jpg" />
<img src="img/up5.jpg" />
<img src="img/up6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</body>
</html>
And the other two js file are in those link you can have a look.
jquery file second jquery file
You can see the current version at webmasteroutlet.com in the footer section. It doesn't pause on mouseover.
here is what i did if anyone wnats to use it i changed the scroll element and it works just fine
scroll: {
items: 1,
duration: 1250,
timeoutDuration: 2500,
easing: 'swing',
pauseOnHover: 'immediate'
},
Have you tried this on mouseover ??
$("#carousel").mouseover(function() {
$("#carousel").trigger('pause' ,true);
});