I am trying to create a boostrap carousel in my wordpress website.
The code is:
<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">
<div class="item active">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
The boostrap jscript libaries are all loaded correctly via https sources.
The issue is that only images from http and not https sources show. In the example above, Image one fails (HTTPS) Image two and three work (HTTP).
As my site is hosted wholly in https, it means no images show when I link to them within my theme file.
How should I fix this?
In the article "How to fix a website with blocked mixed content" explains:
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default.
1st solution (ibid):
The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP.
2nd solution: You can try to use relative URL without http: or https:. For example: //stackoverflow.com/questions/37629071
The issue was resolved by reducing the file size and compression method of the images to be used. The code remains the same, save for the links which are now relative links to the images in the themes folder.
Related
I am relatively new to css and bootstrap and I'm trying to implement a carousel into my angular web app. I copied the source code from the bootstrap site but am having a lot of difficulties aligning everything correctly. Also the image slides don't seem to be working as well - when I click on the prev or next arrow the page reloads and it goes to /#carouselExampleIndicators.
<div id="carouselExampleIndicators" class="carousel slide" 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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img fluid" src="../../assets/img/actual.png" alt="First slide" width="300" height="300">
<div class="carousel-caption d-none d-md-block">
<h5>text 1</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="img fluid" src="../../assets/img/image0.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>text 2</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="img fluid" src="../../assets/img/Picture1.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>text 3</h5>
<p>...</p>
</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>
Any styling/function advice would be appreciated - thanks!!
It's a pretty easy fix! You have a few options. The class for an '''img-fluid''' has the dash - it's not separate. See below. Add it to each image. For the href, just do the same thing you did on the first image - src="" is where you put that photo address.
<img class="img-fluid" src="../../yourimage.jpg" />
Once you do that, your image will take up the entire page. I would recommending doing the following to the top of the carousel:
<div id="carouselExampleIndicators" class="carousel slide container" data-ride="carousel">
Add the class container to contain your image.
With that, the carousel looks great!
I'm not sure exactly how you are trying to build your site, but you could also play around with bootstrap column sizing (ie col-md-8 col-lg-6). Let me know if this is the help you were looking for, and I'm happy to clarify. Have a great day.
My carousel picture show works well when placed inside Site.Master, but the same markup inside the Content element of an .aspx file that uses Site.Master (without the carousel snippet) displays only the alt text for each image that it cycles through.
Environment: Win10 Pro, Visual Studio 2017 Community 15.4.4, bootstrap 3.0.0
Here is the carousel snippet:
<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>
<!-- Images-->
<div class="carousel-inner" role="listbox">
<div class="item carousel-item active">
<img src="1945_DeHavilland_Canada_DH-98_Mosquito_FBMK26.jpg" alt="Slide #1">
</div>
<div class="item carousel-item">
<img src="1969_Aerovodochody_L-29_DELFIN.jpg" alt="Slide #2">
</div>
<div class="item carousel-item">
<img src="737BahamasAir.jpg" alt="Slide #3">
</div>
</div>
<!-- Left Right Arrows -->
<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>
If the file you are using the display the carousel is inside of a subfolder, example:
/wwwroot/Content/file.aspx
Then you would have to set the image source to ../example_image.jpg (or wherever the image is stored, in this case, the image is in your web root folder.
I am using the Full Slider bootstrap here and when I replace the image url by a image in a folder it does not work.
image:url('http://placehold.it/1900x1080&... One')
by
<img class="fill" src="background:url(./img/header.jpg)"></img>
On the bootstrap page, some guys had the same issues even if I tried different solution ../img or /img, it does not work.
Someone has a idea ?
thank you
here is the source code from Bootstrap, I changed
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
by
<div class="fill" src="img/header.jpg"></div>
<header id="myCarousel" class="carousel slide">
<!-- 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">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style=""></div>
<div class="fill" src="img/header.jpg"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</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>
Got it to work on local with this:
<div class="fill" style="background-image: url('img/picture.jpg')"></div>
Inside the wrapper DIV
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image: url('img/picture.jpg')"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
try this.
src = "img/header.jpg"
is there any solution for bootstrap slider image stretch problem for responsive view ? I don't want to set height default
http://getbootstrap.com/examples/carousel/
I tried with the above slider which is an default slider given in twitter bootstrap. when I included images in that slider it was stretching. If anyone faced this issue let me know the solution
I'm not sure if you already looking for this, but Bootstrap also provides a class for responsive images. Just added it to the img-tag.
HTML
<div class="slider">
<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">
<div class="item active">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 1">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 2">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 3">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
JavaScript
$('.carousel').carousel({
interval: 3000
})
See it also on jsfiddle.
How to customize the width of a carousel via bootstrap or css, please?
I'm currently mainly using this code into my web page:
<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">
<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-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
I've tried to set a width to the body, but it wouldn't work.
Thanks in advance!
You have 2 options to set width of carousel as
set container width and include carousel in that container, this width can be customized as
.container {
width : // here enter your custom width
}
Overwrite this over default bootstrap css/less. And don't forget to add media queries to adjust width since this will apply globally.
secondly you can change carousel items inner width with class as below
.carousel-inner {
width: // here enter your custom width;
}
This will just affect width of carousel
Width is relative to the parent container the carousel is in. So you need to set the width on the ID/class of the div you are wrapping the carousel inside. You could also set it inside a bootstrap container (and change the container width globally) or inside a column for more lax specificity.