I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?
Related
I'm stuck in a CSS issue with the ColCade masonry grid by ColCade.
Look at the image (Flexbox Gap Between Rows - Indicated):
I've tried to get rid of the space/gap between these rows but can't seem to find a workaround. :( The grid seems to be working fine. The issue is only with CSS. There are these gaps I can see while inspecting the grid rows with the Chrome Dev tool but cannot figure out what is applying these gaps. I've zeroed the margin/padding for these elements.
Code Snippet below;
<div class="grid" data-colcade="columns: .grid-col, items: .grid-item">
<!-- columns -->
<div class="grid-col grid-col--1"></div>
<div class="grid-col grid-col--2"></div>
<div class="grid-col grid-col--3"></div>
<div class="grid-col grid-col--4"></div>
<!-- items -->
<div class="grid-item">
<div class="content">
<i class="fas fa-link"></i>
</div>
<img src="/assets/grid_img_01.png" alt="" srcset="">
</div>
<!-- items -->
<div class="grid-item">
<div class="content">
<i class="fas fa-link"></i>
</div>
<img src="/assets/grid_img_02.png" alt="" srcset="">
</div>
<!-- items -->
<div class="grid-item">
<div class="content">
<i class="fas fa-link"></i>
</div>
<img src="/assets/grid_img_03.png" alt="" srcset="">
</div>
<!-- items -->
<div class="grid-item">
<div class="content">
<i class="fas fa-link"></i>
</div>
<img src="/assets/grid_img_04.png" alt="" srcset="">
</div>
</div>
<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
<!-- Wrapper for slides -->
<div id="myNewCar" class="carousel-inner" style="height: 100%; ">
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
</div>
</div>
</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>
I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image
Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
to:
<div class="carousel-item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):
https://getbootstrap.com/docs/4.0/components/carousel/
I am using the cycle2 jQuery plugin in my website, it all works but I want to place the prev and next buttons alongside my thumbnails. I didn't want to do absolute positioning as I wanted it to be responsive. Is there a way of constantly aligning the next and prev to the first and last thumbnail?
Here is my code.
Thanks!
<div id="main">
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.tile.js"></script>
<div class="row">
<div class="container">
<div class="col-md-12">
<div id="slideshow-1">
<div id="cycle-1" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-1 .cycle-prev" data-cycle-next="#slideshow-1 .cycle-next" data-cycle-caption="#slideshow-1 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="tileBlind">
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
</div>
</div>
<div id="slideshow-2">
<div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-2 .cycle-prev" data-cycle-next="#slideshow-2 .cycle-next" data-cycle-caption="#slideshow-2 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="carousel" data-cycle-carousel-visible="5" data-cycle-carousel-fluid=true data-allow-wrap="true">
« prev
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
next »
</div> <!-- end of cycle 2 -->
</div> <!-- end of slideshow 2 -->
</div> <!-- end of col md 12 -->
</div> <!-- end of container -->
</div> <!-- end of row -->
Here is how it looks at the moment
you need to add float:left and float:right to next and prev:
« prev
next »
working code here : http://jsfiddle.net/zjvka30q/3/
updated code for improved UI
I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>
just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="01.jpg" alt=""></div>
<div class="item"><img src="02.jpg" alt=""></div>
<div class="item"><img src="03.jpg" alt=""></div>
<div class="item"><img src="02.jpg" alt=""></div>
<div class="item"><img src="03.jpg" alt=""></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
I am working on site based on this theme.
When I put Bootstrap Carousel it's jumping on the last frame and shows nothing. I have read many tutorials and couldn't understand what I did wrong. I following the theme instruction.
My site is here
In the provided URL, you have an empty p element inside .carousel-inner. Try removing that.
looks like <p> tag is giving problem... <p> tag is closing with every "img and div" tags in the end.Try to find <p> tag in your file and remove it.