Hi Guys I am trying to understand where my problem be (I assume that it has to do with the external API).
I am not sure how if the code so far seems ok, I will share what I have so far:
<!--Carousel-->
<!-- <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://pokeapi.co/api/v2/pokemon/2/" class="d-block w-100" alt="active_pokemon">
</div>
<div class="carousel-item">
<img src="https://pokeapi.co/api/v2/pokemon/3/" class="d-block w-100" alt="pokemon">
</div>
<div class="carousel-item">
<img src="https://pokeapi.co/api/v2/pokemon/1/" class="d-block w-100" alt="pokemon">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</button>
</div> -->
I am not sure if it is required to use the following code in JavaScript, although I thought it would trigger the response:
Carousel
var myCarousel = document.querySelector("#myCarousel");
var carousel = new bootstrap.Carousel(myCarousel);
Am I missing the data slide to = # within the images?
Additionally- the app I am creating should be like a data index which retrieves 150 items (with property and such).
Related
I'm just learning some HTML+CSS and today I created a carousel using Bootstrap 4. For some reason it seems not to work. It actually doesn't trigger any action when i press the buttons, neither it switches the slides automatically.
Can anyone please give me some help?
thank you in advance
Please see attached code:
<div class="row slider">
<div class="col mt-3">
<div class="carousel slide" id="slider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/segunda.jpg" alt="Slide #1" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="img/primera.jpg" alt="Slide #2" class="d-block img-fluid">
</div>
</div>
<a href="#slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
You have to include javascript, for example:
$('.slider').carousel({
interval: 2000
})
I cannot get the Carousel Controls to work in Bootstrap v4.0.0-beta. Kind of strange as the Indicators work properly.
Anybody with the same problem? Bellow is the code for the Carousel implementation.
Any help would be highly appreciated.
Thanks!
<div id="my-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#my-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#my-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I had the same problem here. All I did is to copy these plugins from the Bootstrap's Website. Controls are working properly now.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
I am asking that i have added carousel-indicators by using Bootstrap3.and my carousel-indicator looking like rectangle shape.
I have wrote the code as i given below.
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/3.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/4.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/5.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/6.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/7.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--closing carousel-->
And I Wanted my Carousel-indicator look like smaller dot.
you can draw SVG figures to use for your carousel controls, you can add an event listener to literally anything to control your carousel.
<circle cx="25" cy="75" r="20"/> Play around with the size of it, you can assign it color or other attributes as you would any other HTML element.
Why aren't the carousel-indicators or carousel-controls working here...
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="container">
<div class="carousel-caption">
<h2>Title</h2>
<p>Text...p>
<p><a class="btn btn-md btn-success" href="#" role="button">Button</a></p>
</div>
</div>
</div>
<div class="item" id="slide2">
<div class="container">
<div class="carousel-caption">
<h2>Factors Suite</h2>
<p>Enjoy a luxury stay in the Factors Suite which features furniture crafted from reclaimed timber and works by contemporary Scottish artists.</p>
<p><a class="btn btn-md btn-info" href="#" role="button">View Gallery</a></p>
</div>
</div>
</div>
</div><!-- end carousel-inner -->
<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><!-- end carousel -->
At the foot of my page I have:
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
I have tried using bootstrap.js instead - that doesn't work. Driving me mad this because I have the Carousel example from the Bookstrap 3 website, which works when I test it, and it is identical!
This is all live at the following URL:
http://www.cairnsmorecottages.co.uk/rickwood/index.php
Hoping some bright spark will spot the glaring mistake because there clearly is one here (my conception?)! Thank you.
NJ
Why ID from DIV <div id="#myCarousel" class="carousel slide" data-ride="carousel"> include '#' character?
Remove '#' from id
EDITED AFTER COMMENTS:
Review your html div tags. You can compare your html with this:
https://jsfiddle.net/35esebmp/
check this solution, work fine for me
$(document).ready(function(e) {
$(".carousel-indicators").click(function(){
$(".carousel").carousel('prev');
})
$(".left").click(function(){
$(".carousel").carousel('prev');
})
$(".right").click(function(){
$(".carousel").carousel('next');
})
});
Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/
Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.