Hi i have used bootstrap carousel slider in my slider but the mobile responsiveness is not working .Here is my code:
<div class="mobileimage">
<div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo base_url();?>theme/slider/1a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/2a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/3a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/4a.jpg" class="img-responsive">
</div>
</div>
I have updated your fiddle, take a look
.carousel-inner>.item>img {
height: auto;
width: 100%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="Container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New york">
</div>
</div>
</div>
</div>
Related
I have a very basic carousel images slider. I also have a folder with all the images y want to show in the slides
<div class="row">
<div class="col" style="float: none;">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
<div class="carousel-item">
<img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
</div>
</div>
</div>
</div>
What I'd like to know is if is there some way to randomly choose the next image for the carousel from my pool images folder with out specifying by hand in the code?
I'm trying to find something but I haven't had luck yet
i have tried to create a bootstrap carousel, that is when mouseenter it slide and when mouseleave it stop. it working but i want when i leave mouse from the image it will be show the first image.please help me how can i do this?
<script type="text/javascript">
$(".carousel-prdt").on("mouseenter",function() {
$(this).carousel('cycle');
}).on("mouseleave", function() {
$(this).carousel('pause');
});
</script>
<div class="container">
<div id="" class="carousel-prdt slide carousel-fade" data-pause="true" data-interval="2000">`
<div class="carousel-inner">
<div class="carousel-item active">
<div class="prdt-img">
<img src="img/multislide-2.jpg" class="d-block w-100" alt="">
</div>
</div>
<div class="carousel-item">
<div class="prdt-img">
<img src="img/multislide-3.jpg" class="d-block w-100" alt="">
</div>
</div>
<div class="carousel-item">
<div class="prdt-img">
<img src="img/multislide-4.jpg" class="d-block w-100" alt="">
</div>
</div>
</div>
</div>
</div>
but i want when i leave mouse from the image it will be show the first image
On the mouseleave event you can set the current slide using the index of the slides--zero (0) in this case being the first slide.
Also, in a snippet, you do not need to add the <script> tag to the JavaScript panel section.
Select Run code snippet to try it out below.
$(".carousel-prdt").on("mouseenter", function() {
$(this).carousel('cycle');
}).on("mouseleave", function() {
// go to first slide (zero index)
$(this).carousel(0);
$(this).carousel('pause');
});
img {
width: 100%;
height: 150px;
cursor: pointer;
}
.carousel-item:nth-child(1) {
background-color: red;
}
.carousel-item:nth-child(2) {
background-color: blue;
}
.carousel-item:nth-child(3) {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div id="" class="carousel-prdt slide carousel-fade" data-pause="true" data-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="prdt-img">
<img src="img/multislide-2.jpg" class="d-block w-100" alt="">
</div>
</div>
<div class="carousel-item">
<div class="prdt-img">
<img src="img/multislide-3.jpg" class="d-block w-100" alt="">
</div>
</div>
<div class="carousel-item">
<div class="prdt-img">
<img src="img/multislide-4.jpg" class="d-block w-100" alt="">
</div>
</div>
</div>
</div>
</div>
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'm new.when I'm using bootstrap slide show and owl-carousel then bootstrap slide show take owl-carousel CSS how to use that.
carousel item.
<div class="carousel">
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
</div>
bootstrap slide show
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/baner.png" alt="Chania">
</div>
<div class="item">
<img src="images/baner.png" alt="Chania" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
</div>
</div>
Well, maybe it depends in what order you are calling your steelsheets. Whithout any code it will be hard to help you.
In my projects I proceed this way
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>
<div>
<!-- your bootstrap slider -->
</div>
<div>
<!-- your owl slider -->
</div>
<script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>
<!-- init owl -->
<script type="text/javascript">
$('.myOwlCarousel').owlCarousel({
// some configs
});
</script>
</body>
</html>
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/