Slider Not Rendering Properly in Page - html

I have done a project in express js, html, css etc..I have one slider in one page, I am using bootstrap Carousel, with static data it will work properly but with dynamic data (from database) it will not render properly. The div forms separately and display one by one not as a slider. I don,t know how to fix it?
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% for(var i=0; i< events.length;i++ ){%>
<div class="item active">
<!-- style="background-image:url(images/index7.jpg)" -->
<% if(events[i].checkbox == 'true'){ %>
<div class="banner-item bg-overlay" style="background-image:url(<%=imageurl+events[i].proimg%>)">
<div class="container">
<div class="banner-content text-center">
<div class="banner-content-wrap">
<div id="clockdiv">
<div class="countdown bg-style">
<div class="counter-day">
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div class="counter-hour">
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div class="counter-minute">
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div class="counter-second">
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<h1 class="banner-title">
<%=events[i].eventName%>
</h1>
<p class="banner-btn text-center">
Login
Buy Tickets
Whitepaper
</p>
</div>
</div>
</div>
</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>

Related

carousel slider showing images in new lines one after another not in a single line(sliding images)

I am trying to show images in carousel slider but the problem is that images are not showing in one line and sliding also not working every image is showing in new line, next and previous button also not showing. Please check code below
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators" id="indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" id="homepageItems">
<div class="item">
<img src="/assets/Gallery/vd33qk3l.pj0.PNG"/>
</div>
<div class="item">
<img src="/assets/Gallery/spzkmguq.duw.PNG"/>
</div>
<div class="item active">
<img src="/assets/Gallery/bzmxjuy1.3ou.PNG"/>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Are you tried "float:left"
<style>
.carousel-inner .item{
float:left;
}
</style>
https://jsfiddle.net/hfn07tkv/

Accessibility - Bootstrap4 Carousel control tabbing is not going on to carousel-caption div while using the tab key from Keyboard

PFB is the example, Here I am using for Bootstrap Carousel control.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
This example is working fine but when i am using tab key from the keyboard, control is not going on to anchor tag inside the div with class "carousel-caption".
I tried "tab-index" attribute for anchor tag to set the tabbing but tabbing is not working properly.
I want tabbing to work like below:
Left Arrow -> 1st anchor tag("LA is always so much fun!") -> 2nd anchor tag("Thank you, Chicago!") -> 3rd anchor tag("We love the Big Apple!") -> Right arrow
Could anyone please let me know how to implement tabbing for
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static1.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static2.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static3.png" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</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>
You can't have tab index defined on an <li>, so we had to wrap our ul.carousel-indicators>li inside an anchor tag (which does work with tab index)...
Check the code which works with the same example and implements tabIndex as you wanted...
update: in light of questioner's comment, tab index now goes to the <p> under the heading on each slide instead of the carousel indicators; the href for these <a> tags to be updated by the user...
.carousel-indicators .active {
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a class="active" tabindex="2" href="#myCarousel" data-slide-to="0">
<p>LA is always so much fun!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a class="" tabindex="3" href="#myCarousel" data-slide-to="1">
<p>Thank you, Chicago!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a class="" tabindex="4" href="#myCarousel" data-slide-to="2">
<p>We love the Big Apple!</p>
</a>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-target="#myCarousel" data-slide-to="0">
</li>
<li class="" data-target="#myCarousel" data-slide-to="1">
</li>
<li class="" data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" tabindex="1" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" tabindex="5" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
According to your comment:
...Here I want to navigate between the carousel controls using the keyboard.
You can use keydown event. As reported in the documentation:
Keyboard events are only generated by , and anything with the contentEditable attribute or with tabindex="-1".
It's required to add tabindex="-1" to your carousel div plus the event handler.
$('#myCarousel').on('keydown', function(e) {
if (e.keyCode == 37) { // left arrow
$('#myCarousel').carousel('prev')
} else {
if (e.keyCode == 39) { // right arrow
$('#myCarousel').carousel('next')
}
}
})
<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/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" tabindex="-1">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://dummyimage.com/300x200/000/fff&text=1" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=2" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=3" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Using Bootstrap and working with Carousel

I am using Bootstrap and I am using Carousel to display a few pictures. I have it all in place and the first picture shows, however when you click the right and left Chevron's it doesn't take you to the next picture.
I am a little new to HTML / CSSl and definitely Bootstrap. Any help is appreciated.
Thanks. My Carousel code is below.
<div class="container-fluid">
<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/type.jpg" alt="typewriter">
<div class="carousel-caption">
<h3>The Header</h3>
<p>Header Text</p>
</div>
</div>
<div class="item">
<img src="img/pad.jpg" alt="scratchpad">
<div class="carousel-caption">
<h3>Second Header</h3>
<p>Second Text</p>
</div>
</div>
<div class="item">
<img src="img/screen.jpg" alt="monitor">
<div class="carousel-caption">
<h3>Third Header</h3>
<p>Third Text</p>
</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>
</div>
You probably forgot the bootstrap js file. can you include your header as well?
Make sure you have a link to bootstrap js (as well as css) in the html header
From the bootstrap site:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap Carousel Customization

I'm pretty new to front-end and I'm using bootstrap for it. I seem to have issues in customizing it . The issues that I'm facing is, the picture is not within the left & right controller. How do I customize the image and controller so it fits into one frame ?
p/s this is my first time with StackOverflow.
<div class="container">
<div class="row" >
<div class = "col-xs-12" >
<div id="myCarousel" class="carousel slide" style="width: 486px; height:324px" 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<%= image_tag("chart_1st_img.png", :class =>"img-responsive", :alt => "Chart 1", :width => "486", :height => "324" )%>
<div class="carousel-caption">
<br>
<br>
<h3>Pie Charts</h3>
<p> Beatiful designed data. </p>
</div>
</div>
<div class="item">
<%= image_tag("chart_2nd_img.png", :class =>"img-responsive", :alt => "Chart 2")%>
<br>
<br>
<div class="carousel-caption">
<h3>Customer Hapiness</h3>
<p>Overall Report</p>
</div>
</div>
<div class="item">
<%= image_tag("charts_3rd_img.png", :class =>"img-responsive", :alt => "Chart 3" )%>
<div class="carousel-caption">
<br>
<br>
<h3> Various Graphics </h3>
<p> i dont know what to describe</p>
</div>
</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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
Here is my fiddle.
Please remove width and or replace by 100%

Bootstrap carousel not working, puts id on address bar instead

I am trying to make the bootstrap carousel work and I'm kind of struggling.
The carousel doesn't automatically start and when I try to click on the arrows in order to change images, it just adds the id of the carousel in the address bar and doesn't change images.
Here's my code:
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/photos/2.jpg" alt="Band performing">
</div>
<div class="item">
<img src="img/photos/1.jpg" alt="Band performing 2">
</div>
<div class="item">
<img src="img/photos/3.jpg" alt="Band performing 3">
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Thanks,
Nevo
Found the answer, obviously idiotic.
Just forgot to add the bootstrap.js.