I've been trying to understand why my carousel won't fade between transitions. It cycles as expected, but don't seem to apply the transition effect to make one panel fade in to the next.
Here's what I have so far:
/* Javascript */
function cycle() {
var active = $('.carousel .item.active');
var panels = $('.carousel .item');
var pos = panels.index(active);
var next = panels.eq((pos >= 5) ? 0 : ++pos);
next.addClass('active');
active.removeClass('active');
}
var interval = setInterval(cycle, 2000);
/* CSS */
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
opacity: 0;
}
.carousel .item.active {
opacity: 1;
}
/* HTML */
<div id="id_landing_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item" data-nav-button="nav-home">
<img src="/media/carousel/home.png">
<div class="carousel-caption">
<h4><p>Welcome</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-residential">
<img src="/media/carousel/residential.jpg">
<div class="carousel-caption">
<h4><p>Residential</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-commercial">
<img src="/media/carousel/commercial.jpg">
<div class="carousel-caption">
<h4><p>Commercial</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-service">
<img src="/media/carousel/service.jpg">
<div class="carousel-caption">
<h4><p>Service</p></h4>
</div>
</div>
<div class="item active" data-nav-button="nav-blog">
<img src="/media/carousel/blog.jpg">
<div class="carousel-caption">
<h4><p>Blog</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-contact">
<img src="/media/carousel/contact.jpg">
<div class="carousel-caption">
<h4><p>Contact us</p></h4>
</div>
</div>
</div>
</div>
If anyone has any insight in to what I"m doing wrong, I'd very much appreciate it.
Damn. Nevermind. Solved it myself. Another style was setting the carousel's div element to display: none when it wasn't active.
Related
This is quite a difficult issue to explain without seeing it so I will include a link to where you can view the website so you can see for yourselves.
Basically, my Bootstrap image slide works perfectly on my desktop, however, when I view it on my iPhone X each slide sort of slides twice (or bounces?) for each transition.
It might be worth noting that it does NOT do this when I view it on an iPhone 7 (it works perfectly).
I cannot for the life of me work this out, and have tried researching it but appears no one has posted this same issue before...
It seems like an iPhone issue and hopefully the fact that it works on an iPhone 7 but not an iPhone X could help solve it?
Website Link
/* Jumbotron Carousel */
.preload {
display: none;
}
.carousel-inner .carousel-item {
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, -ms-transform 0.4s ease;
transition: transform 0.4s ease, -o-transform 0.4s ease;
transition: transform 0.4s ease, -moz-transform 0.4s ease;
}
.jumbotron .container {
height: 500px;
}
.carousel-inner {
width: 100%;
height: 450px;
}
.carousel-indicators:hover {
cursor: pointer;
}
.carousel-control-next {
height: 0;
top: 50%;
}
.carousel-control-prev {
height: 0;
top: 50%;
}
.carousel-control-prev-icon {
opacity: none;
}
.carousel-control-next-icon {
opacity: 2;
}
#slide1 {
background-color: black;
background-image: url(/images/home1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide2 {
background-color: black;
background-image: url(/images/home2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide3 {
background-color: black;
background-image: url(/images/home3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.carousel-indicators {
bottom: -10%;
position: absolute;
}
#jumbo-btn {
background-color: #e4381C;
border-color: #e4381C;
}
<!-- Carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myslider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div id="slide1" class="jumbotron">
<div class="container">
<div class="row">
<div id="slide1-text" class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide2" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="#" role="button">View Stock</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide3" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The slideshow END -->
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myslider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myslider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Left and right controls END -->
</div>
<!-- Carousel END -->
Same bug on the latest version of bootstrap...
The content slide twice.
My workaround is to use a custom slide-fade affect explained here:
https://silvawebdesigns.com/how-to-change-the-bootstrap-4-carousel-to-a-fade-transition-instead-of-slide/
I believe this is related to the version of bootstrap 4 you are using if you upgrade to the latest version 4.5.2 this should solve the issue.
JSFiddle
I'm not happy with the current result of the code in the fiddle, I'd like it to be less choppy and just fade in while also sliding in from the bottom but my JQuery skills are not the greatest. Is using CSS as the slide in the best choice? Wasn't able to find any examples of sliding in using JQuery.
Any help much appreciated.
Here's the same code.
<!doctype html>
<html lang="en">
<style>
#keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
.v1 {
animation: 1s ease-out 0s 1 slideInFromBottom;
}
.v2 {
animation: 1s ease-out 0.2s 1 slideInFromBottom;
}
.v3 {
animation: 1s ease-out 0.4s 1 slideInFromBottom;
}
</style>
<head>
<meta charset="utf-8">
<title>Vista Report</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4">
<div class="card v1" id="v1">
<div class="card-image">
<img id="preload_v1" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card v2" id="v2">
<div class="card-image">
<img id="preload_v2" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card v3" id="v3">
<div class="card-image">
<img id="preload_v3" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
</body>
<script>
$("#v1").ready(function(){
$("#preload_v1").fadeIn(2000);
});
$("#v2").ready(function(){
$("#preload_v2").fadeIn(2000);
});
$("#v3").ready(function(){
$("#preload_v3").fadeIn(2000);
});
</script>
</html>
I removed the jQuery scripts and made it work with css alone.
replaced style="display:none" on img tag with following css
.card{
opacity:0;
}
For fadeIn effect changed opacity from 0 to 1
#keyframes slideInFromBottom {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
To keep the animation in final state added forwards to animation and also updated animation-duration and animation-delay
.v1 {
animation: 1s ease-out 0s 1 slideInFromBottom forwards;
}
.v2 {
animation: 1.2s ease-out 0.2s 1 slideInFromBottom forwards;
}
.v3 {
animation: 1.4s ease-in 0.4s 1 slideInFromBottom forwards;
}
Demo
I am trying to change the speed of a fade effect in Bootstrap. I found this answer using css:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
...but this only affects the fade-in time. The fade-out stays the same. Any suggestions?
There is no fade-out time, the class that makes the element visible just gets removed.
To make it fade-out, you have to make sure the item doesn't get removed from the dom (HTML document), but rather make it invisible so it can fade.
Here is an example, adjust to your wishes:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.tab-content {
position:relative;
}
.tab-content>.tab-pane {
/* in order to make sure the elements are nicely in position
use position:absolute; */
position:absolute;
top:0;
}
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
.tab-content>.tab-pane:not(.in) {
/* display:none; is the default behaviour, make that display:block; */
display:block;
/* make the opacity 0, that is what the transition responds to! */
opacity:0;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The issue is that when an item is not active, it's display property is set to display:none, and therefore is being hidden before any animation can be applied. If you position everything using absolute position to overlap, then you can leave the display as display:block and just change the opacity:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
.tab-content {
position:relative;
}
.tab-content>.tab-pane {
top: 0;
position:absolute;
display:block;
}
.tab-content>.tab-pane:not(.active) {
opacity: 0;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you simply want to avoid having the fade affect, or need the tabs to appear more quickly remove the fade class.
// Original
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
// Updated
<div class="tab-content">
<div id="one" class="tab-pane in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
The fade class is only applied to the first pane, then when the button is clicked then Jquery removes the active class and fade class and applies it to the corresponding pane.
I have several divs on a page with the same class that contain some buttons that are disabled by default. The goal is to highlight one of the divs on hover and to remove the 'disabled' class from the button.
I have been able to do it on ALL of the divs, but can't seem to get it working for only the element being hovered over. Tried $(this).find without luck.
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
Script:
$('.box').hover(
function() {
$('.box .button').removeClass('disabled');
},
function() {
$('.box .button').addClass('disabled');
}
);
Here I have it working on both elements but want to hover / remove disable class on individual box: FIDDLE
Use this to refer the hovered element and get element based on the context.
$('.box').hover(
function() {
$('.button', this).removeClass('disabled');
},
function() {
$('.button', this).addClass('disabled');
}
);
$('.box').hover(
function() {
$('.button', this).removeClass('disabled');
},
function() {
$('.button', this).addClass('disabled');
}
);
.box {
margin: 0 0 1rem 0;
padding: 1rem;
border-radius: 0;
position: relative;
overflow: hidden;
border:1px solid #EFEFF4;
font-size: 0.9rem;
line-height: 1.3rem;
}
.box:hover {
border-color:#59c07b;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.disabled{background:white}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
You can do this.
$('.box').hover(
function() {
$(this).find('.button').removeClass('disabled')
},
function() {
$(this).find('.button').addClass('disabled')
}
);
I don't know how you tried $(this).find(), but it should work for you. Here is a demo:
$('button').text(function(){return this.className;}); //this line is for testing.
$('.box').hover(
function() {
$(this).find('button').removeClass('disabled');
$('button').text(function(){return this.className;}); //this line is for testing.
},
function() {
$(this).find('button').addClass('disabled');
$('button').text(function(){return this.className;}); //this line is for testing.
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
I am coding a website which needs the full-screen fadein fadeout slider with content and next previous navigation . So I found this.
But the main problem is that I need this effect to fadein fadeout.
You can use bootstrap-carousel
http://getbootstrap.com/javascript/#carousel
For auto-gen help
http://www.bootply.com/64693
Here I'm giving one work-around for you with this fiddle http://jsfiddle.net/fj75wqwc/
The same is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header text-center">
<h1>Bootstrap Carousel with fade effect</h1>
</div>
<div class="span6 offset3">
<div id="carousel_fade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="item active">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-1">
</div>
<div class="item ">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-2">
</div>
</div>
<a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
<a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('.carousel').carousel({
interval: 7000
})
})
</script>
</body>
</html>