I want to show 3 thumbnails and onClick of arrow, it has to scroll only one at a time... When it comes to version 3.3, it is scrolling 3 thumbnails at a time... (but it is showing exactly what I want after that.). How can I fix this.
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
En de javascript:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
JSFiddle: http://jsfiddle.net/Luuw070f/
Here a workaround with the transform property
http://jsfiddle.net/rewobs/Luuw070f/4/
Related
I have a page with 6 clickable buttons that each open up a different modal. I have 4 working ones that open their corresponding modal when clicked, however, all of them after the 4th do not work. The modal works if I assign the ID of an existing modal to the broken modals, however, if I change ONLY the ID from portfolioModal4 to portfolioModal5, it doesn't work.
Below is the code for the modal followed by the code for the button that, when pressed, should open the modal.
<!-- Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Readiness Center Dedication</h2>
<p class="item-intro text-muted">4 Photos</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Dedication Language</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Candy Mason at Renaming</p>
</div>
</div>
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Photos</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="img/michigan.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">2019 Michigan Tailgate vs. Army</div>
<div class="portfolio-caption-subheading text-muted">6 Photos</div>
</div>
</div>
</div>
Is there a reason you're using an anchor tag instead of a button to trigger your modal? In the Bootstrap docs, it looks like they use a button element with a data-target attribute. Can you try that instead and see if it works? Using what they have in the docs may be more screen-reader friendly too.
Seems like the part of the modal HTML is not having complete closing tags
Here you are a fixed HTML modal:
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Readiness Center Dedication</h2>
<p class="item-intro text-muted">4 Photos</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Dedication Language</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Candy Mason at Renaming</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope this would work for you
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- When click on image -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;">
<figcaption class="img-title"> </figcaption>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default" style="margin-top: 7px;">
<div class="photo-gallary-head panel-heading ">
<h4 title="Photo Gallery" class="photo-gallary-head-name"> Photo Gallery </h4>
</div>
<div class="panel-body">
<div class="img-t humbnail">
<div class="carousel slide" id="myCarousel1" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!--/item-->
<div class="item active">
<div class="row">
<div class="col-xs-3">
<a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg">
<figcaption class="img-title">A caption for the above image.</figcaption></a>
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg">
</div>
</div>
</div>
<!--/item-->
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg">
</div>
</div>
</div>
<!--/item-->
</div>
</div>
<div id="carouselButtons" style="text-align:center; margin-top:20px">
<a class="left1 carousel-control1" href="#myCarousel1
" data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a>
<button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play">
<i class="fa fa-play-circle" style="font-size:20px"></i>
</button>
<button id="playButton" type="button" class="btn btn-default btn-md" title="Pause">
<i class="fa fa-pause-circle" style="font-size:20px"></i>
</button>
<a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.
You can try to set title or alt tag into image, i think it will take automatically as caption.
Or can you give me your slider jquery url
Currently the Carousel shows 3 images, which is great until mobile which I would like to display a single image which can be navigated through, can anybody edit my code or push me in the right direction to discover how it can be achieved
Here is the html:
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="img/home-image1.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image2.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image3.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image4.png" class="img-responsive center-block">
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
and here is the current JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
try setting the col values for all window sizes. An example would be col-sm-12 col-xs-12 for small windowed devices and col-md-12 col-lg-12 for larger windowed devices
I am trying to call this JavaScript function in my Angular JS controller below. The carousel buttons will not work like the example from this site http://www.bootply.com/1DtSbhZQtI. Where is my error in the JavaScript? Thanks.
var myCarousel = function() {
$('#myCarousel').on('slid.bs.carousel')};
myCarousel();
This is in order to run a thumbnail carousel on my html file, here is the code for the html.
<div class="col-md-6">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/StaticBarHeadcountHorizontal.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticBarHeadcountVertical.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticGroupedHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendBarHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/TrendDonutHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLineHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLinePercentofTotalHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
I think this is not related to angular, you just need to create the carousel with:
$('#myCarousel').carousel();
I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.
Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});
Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.
Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.