I have a slider made in bootstrap. The problem is the glyphicon icons are loaded properly in the local server, but not loaded in the live server.
<div id="carousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo base_url('img/slide1.jpg'); ?>" alt="">
</div>
<div class="item">
<img src="<?php echo base_url('img/slide2.jpg'); ?>" alt="">
</div>
<div class="item">
<img src="<?php echo base_url('img/slide3.jpg'); ?>" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Most likely you have diferent website versions on you localhost and on production. Either you forgot to upload the fonts directory or any other bootstrap component, either you have diferent bootstrap versions for the two enviroments.
Manually navigate to all 4 font files on the production server and see what happens...do you get 404 or a download file? On my own server, in FireFox, I get a download prompt for each file except .svg. The .svg opens directly (but is empty white page, not an error).
Next, relative to the CSS files, where are they? Unless you've modified the paths manually, relative to your CSS file that's loaded in the browser, your font files should be up one directory, then in the fonts folder (../fonts/font-file.ext). Does your production server have any kind of auto-compiling/minification tools where you are loading the file from a location other than its original source?
Needless to say without paths to the actual offending location, there is no way for me to debug it based on your HTML.
Related
I want to add a carousel from bootstrap to my page, but it really gets me hard time to set it up on every screen, when it looks good on mobile then on big screen it increases image and cuts sides. I don't already know how many different ways I've tired to make it looks right.
<div class="row container-fluid">
<div id="slide" class="col-12 col-md-6">
<div id="carouselExampleIndicators" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner carousel">
<div class="carousel-item active">
<img src="assets/images-car/cat1.png" class="d-block w-100"
alt="a ginger cat sitting on the stairs">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat2.png" class="d-block w-100"
alt="a black-white kitten on young buddha's hands">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat11.png" class="d-block w-100"
alt="a black cat laying on the colorful fabrics">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat4.png" class="d-block w-100"
alt="a white cat with blue eyes covered in colorful fabric">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
#media only screen and (min-width: 768px) {
.carousel {width:75%; height:50vh;}}
I've tried to change display from blok to flex, then I've changed the default bootstrap width on bigger screen to 75% and maybe that wouldn't be a bad result but then I would need to move slides to center of the div but I didn't know how, nothing worked for centering whole carousel. And also when I set up the width for 75% on media screen min-width: 768px, then when I make my windows smaller the carousel gets smaller until the breakpoint for mobile, so I am not sure what media query should I set up for this to look good on every sizes.
Page photo
First time updating this website and unsure how to activate the carousel... currently it just stays on the first image and won't rotate to the next slide.
I have confirmed the image file names and paths are correct. Any insights or suggestions would be much appreciated. Thanks!
Had to Screenshot the code because the portion <ol class="carousel-indicators".... disappears when entering in post body on stackflow... weird... maybe an indication that is the problem area?
See Screenshot of Coding Here
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
$('.carousel').carousel({
interval: 5000
})
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
</ol>
<!-- Wrapper for slides (v2/legends_treasures.html) -->
<div class="carousel-inner">
<div class="item active">
<a href="">
<div class="fill" style="background-image:url('https://guernseys.com/Guernseys%20New/images/1900x1080artauction.jpg');"></div>
</a>
</div>
<div class="item active">
<a href="">
<div class="fill" style="background-image:url('https://guernseys.com/Guernseys%20New/images/1900x1080henrymiller.jpg');"></div>
</a>
</div>
</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>
</header>
So I have this carousel in my home. I didn't do any specific config for the bootstrap carousel. I just left it with the default value. I don't initialize it in the JS.
Video :
https://drive.google.com/file/d/1zMANI5AWab1xO74kQbb4Rq8fRyvkMMNC/view?usp=sharing
So, it's working normally sometimes. But there is a case that happen randomly that the carousel freezes. After doing some research, turned out that the class of the carousel didn't change (see the video).
When I clicked the arrow, the carousel change the siblings of the .active class to .next.left then after that, the .next became the .active.
But sometimes it's stuck, and not changing. That's when it freezes.
And it's random, sometime even the second time click is already freezes.
But sometime, it took like 50+ clicks to get the error.
I've tried to research it and some of the forums here suggest to rearrange the script. I tried to load jquery first then bootstrap.js. But the freezes still occurs.
It should be running without problem and always responsive to the click.
Here's the code
<head>
<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/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="banner-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#banner-carousel" data-slide-to="0" class="active"></li>
<li data-target="#banner-carousel" data-slide-to="1"></li>
<li data-target="#banner-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<h1>First</h1>
</div>
<div class="item">
<h1>Second</h1>
</div>
<div class="item">
<h1>Third</h1>
</div>
</div>
<a class="left carousel-control" href="#banner-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#banner-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
Update:
I've researched here and there, and there's one way that make it works.
https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js
By adding that line, it works, but in logged some console error everytime it slides.
"Uncaught TypeError: Cannot convert undefined or null to object"
Am trying to put one bootstrap carousal (with 4 images at a time scroll)
into a bootstrap tabs. I have tried many examples but am not getting. Am using bootstrap 3.0. Can anybody please give an idea for this? Am unable to see at least one bootstrap 3.0 carousal anywhere
You can just use the standard markup but add four images inside each of your .item slide wrappers.
HTML:
<div class="carousel slide" data-ride="carousel" id="carousel4img">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel4img" data-slide-to="0" class="active"></li>
<li data-target="#carousel4img" data-slide-to="1"></li>
<li data-target="#carousel4img" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/350/E83E00/fff&text=Image+1">
<img src="http://placehold.it/350/00ACE7/fff&text=Image+2">
<img src="http://placehold.it/350/e8117f/fff&text=Image+3">
<img src="http://placehold.it/350/C7FF0D/fff&text=Image+4">
</div>
<div class="item">
<img src="http://placehold.it/350/FF0000/fff&text=Image+5">
<img src="http://placehold.it/350/E8950C/fff&text=Image+6">
<img src="http://placehold.it/350/782AE8/fff&text=Image+7">
<img src="http://placehold.it/350/393CE8/fff&text=Image+8">
</div>
<div class="item">
<img src="http://placehold.it/350/40083D/fff&text=Image+9">
<img src="http://placehold.it/350/FF1919/fff&text=Image+10">
<img src="http://placehold.it/350/00E790/fff&text=Image+11">
<img src="http://placehold.it/350/FFB500/fff&text=Image+12">
</div>
</div><!--/.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel4img" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel4img" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/.carousel -->
CSS:
.item img {
width:25%;
float:left;
}
When using BS3 and patterns/designs that are similar to the media object layout:
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Does it make more sense to recreate the pattern using BS3 grids (and thus built-in media queries, sorta like thumbnails)? For example:
<div class="row">
<a class="col-sm-5 col-md-4" href="#">
<img src="holder.js/100%x112" alt="media-like-object">
</a>
<div class="col-sm-6 col-md-7">
<h4 class="hidden-xs">Media heading</h4>
...
</div>
</div>
Or is there some way to utilize the built-in media object responsively? I guess I'm confused as the media object seems to be static. What am I missing?