I want to loop through my images, but my code has a bug that I cant find, I do hope that you could help me outmy
carousel.js
$(function () {
$('#homeCarousel').carousel({
interval: 4000
});
});
I am calling the mycarousel.js file from my home.blade.php
home.blade.php
#extends('client.layouts.app')
#section('title')
*** | Home
#endsection
#section('scripts')
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="{{asset('frontassets/js/bootstrap.min.js')}}"></script>
<script src="{{asset('frontassets/js/myCarousel.js')}}">
</script>
#endsection
#section('content')
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
#foreach($certificates as $certificate)
<!-- Item 1 -->
<div class="item {{ $loop->first ? 'active' : '' }}">
<img src="/storage/CertificateImages/{{$certificate->image}}" />
<div class="container">
<div class="carousel-caption">
<h1>{{$certificate->title}}</h1>
</p>
</div>
</div>
</div>
#endforeach
<!-- Item 2 -->
</div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
#endsection
The results end up like this, no loop
Related
Image slider not working when i click on the arrows or when i try to manually change the image.
With my limited knowledge, i tried editing the code with no luck
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container" id="slider"><!-- Container Starts -->
<div class="col-md-12"><!-- col-md-12 Starts -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- carousel slide Starts -->
<ol class="carousel-indicators"><!-- carousel-indicators Starts -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol><!-- carousel-indicators Ends -->
<div class="carousel-inner"><!-- carousel-inner Starts -->
<div class="item-active">
<img src="admin_panel/slides_images/1.jpg" alt="slide 1">
</div>
<div class="item">
<img src="admin_panel/slides_images/2.jpg" alt="slide 2">
</div>
<div class="item">
<img src="admin_panel/slides_images/3.jpg" alt="slide 3">
</div>
<div class="item">
<img src="admin_panel/slides_images/4.jpg" alt="slide 4">
</div>
</div><!-- carousel-inner Ends -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><!-- left carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-left"> </span>
<span class="sr-only"> Previous </span>
</a><!-- left carousel-control Ends -->
<a class="right carousel-control" href="#myCarousel" data-slide="next"><!-- right carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only"> Next </span>
</a><!-- right carousel-control Ends -->
</div><!-- carousel slide Ends -->
</div><!-- col-md-12 Ends -->
</div><!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
The slider is supposed to change when i click on the arrow or try and change it manually. No errors appear, just not the expected result.
Use The Below Code
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="slide 1" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="slide 2" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="slide 3" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="slide 4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome.com/4c7009c904.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
You have wrong classes setted in the div
it's not div class="carousel-item" it's just div class="item"
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've tried that in fiddle and it's working.
Regards
When I click on the carousel left and right button, I am always directed to another page(login page). I am able to click on the small button to navigate to the other slides but not through the button. Im not sure why it turned out to be this way.
app.js
.state('home', {
url: '/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
})
index.html
<li>
<a ui-sref="home" ui-sref-active="active">Home</a>
</li>
home.html
<section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/ibm.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="/img/ibm.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
This usually happens when your JQuery file is loaded after your bootstrap file like this
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery-2.1.4.min.js"> </script>
It should be loading the JQuery first and than Bootstrap like this.
<script src="/js/jquery-2.1.4.min.js"> </script>
<script src="/js/bootstrap.min.js"></script>
Check this if this is not the case then will have to take a deeper look.
Also you may find some useful answers here
Carousel Slider redirects
I hate that this is my first question, but I have looked all over and tried to find why my code is not working. Only the first slide loads, and when you click either the left or right arrow, it acts like it is a "link" to take you to that position on the page. Here is what I have so far that is relevant to this (you can view it on www.KatyEnglish.com). Any/all help will be greatly appreciated!!! Thanks!
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="js/textillate-master/assets/animate.css">
</head>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slider6.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider1.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider5.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider3.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider2.jpg" alt="Katy English Photography Portraits">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/textillate-master/jquery.textillate.js"></script>
<script src="js/textillate-master/assets/jquery.fittext.js"></script>
<script src="js/textillate-master/assets/jquery.lettering.js"></script>
<script>
$(function(){
$('.tlt').textillate({
in: {effect:'rollIn'}
});
})
</script>
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 3000
});
});
</script>
I have found a perfectly working solution to the question of how to link to a specific slide in a bootstrap carousel. However, I have multiple carousels with different Id's running on the same page. How can my link target a specific carousel id?
The specifics:
I have three carousels
They have different ids: "carousel-01", "carousel-02", "carousel-03".
I call the function to be able to link to specific slides. Here it is carousel-01. Could also be carousel-03
function goToSlide(number) {$("#carousel-01").carousel(number);}
Then I put my link in the markup
Go to slide #5
My question is: How can I make the link target a carousel with a specific id. Let's say, I'd want not #carousel-01 move but #carousel-03?
You must use different id for both carousel like this
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
Then call the carousel via javascript
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('#carousel2').carousel()
</script>
Here is the solution for that on click if 'Go to slide3' , It will take the specific slider , ex: that is now i am targeting it to the class 'slidehere' in '#carousel2'
<!-- link to specific slider -->
Go to slide3
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2" class="slidethis"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item slidethis"> <!-- targeted item on click 'slidethis'-->
<img src="..." alt="...">
<p>slide</p>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
javascript required
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('.slide3').click(function() { //onclick
/* Act on the event */
$('#carousel2 .carousel-inner .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-inner .slidethis').addClass('active') //adding active class to targeted slide
$('#carousel2 .carousel-indicators .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-indicators .slidethis').addClass('active')/adding active class to targeted slide
});
</script>