Hello everyone and thanks for the help in advance. I need to develop a responsive page with a slideshow. The slideshow would have a gallery of images but I would also like to display text and links overlaying the images. I’m not really sure how to accomplish this. I assume each slide would require its own div with corresponding CSS for the placement of text and or links. What I am wondering about is whether I should use a slideshow script already written and if so which one. I’m also concerned about intermingling the CSS for the slideshow package and the slides them selves. Any insight would be appreciated.
Hi, have you thought about using OWL Carousel https://owlcarousel2.github.io/OwlCarousel2/ to make your presentation?
It is a complete and easily customizable jQuery plugin. It doesn’t invade your code.
You can add title, text, links, above images. It is of course also responsive.
Thanks for the response. I’ve downloaded and installed the latest version of Owl 2.3.4 and have a page located at : http://christyforcongress.com/home/slideshow2. I have the slideshow working, but am having problems customizing any of the features. Specifically, I am trying to get dots to display as well as customize the look and location of the previous and next slides buttons. I have nav: true, dots: true, and dotsEach: true. The dots do not display at all and the previous and next display very small below the slides. Any help would be appreciated.
Perfect. Now all you have to do is customize the slider components.
For example.: dots
.owl-dot span {
background-color: black;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 0 4px;
width: 8px;
}
For example: nav
.owl-nav {
font-size: 40px;
}
Tip: through the DOM (source code of the page through your browser) you can find out how the code is made, which components have been inserted and then you can add your CSS instructions to customize the slider.
If you need help, just ask.
2 Likes
Thanks for the response. I spend most of my time on back end development so my HTML/Css is pretty rudimentary. I placed another page at http://christyforcongress.com/home/slideshow3. So three questions come to mind. First, the last two slides do not display properly. The next to last displays “prev” and “next” which is the text in the two divs, but I’m not sure why they only display this text on the next to last slide. Then on the final slide, three dots display, I assume because I have three
tags in the dots
but again, not sure why. Finally, the images I have are of varying sizes. I want to create a professional looking carousel, so my question is do I have to edit the photos or are there other methods to display only a portion of the image.
Again, thank you so much for your help and consideration.
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link href="ui/vendor/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="ui/vendor/owl-carousel/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
.owl-carousel {
position: relative;
}
.owl-dots {
margin-top: 10px;
text-align: center;
}
.owl-dot span {
background-color: black;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 0 4px;
width: 8px;
}
.owl-nav {
font-size: 40px;
}
.owl-carousel .owl-nav .owl-prev {
bottom: -15px;
left: 0;
position: absolute;
}
.owl-carousel .owl-nav .owl-next {
bottom: -15px;
right: 0;
position: absolute;
}
.item {
background-color: lightgray;
height: 200px;
text-align: center;
width: 100%;
}
.item img {
display: inline-block !important;
height: 100%;
width: auto !important;
}
</style>
</head>
<body>
<div style="max-width: 768px;">
<div class="owl-carousel">
<div class="item"><img src="upload/1.jpg"></div>
<div class="item"><img src="upload/2.jpg"></div>
<div class="item"><img src="upload/3.jpg"></div>
<div class="item"><img src="upload/4.jpg"></div>
<div class="item"><img src="upload/5.jpg"></div>
<div class="item"><img src="upload/6.jpg"></div>
<div class="item"><img src="upload/7.jpg"></div>
<div class="item"><img src="upload/8.jpg"></div>
<div class="item"><img src="upload/9.jpg"></div>
<div class="item"><img src="upload/10.jpg"></div>
<div class="item"><img src="upload/11.jpg"></div>
<div class="item"><img src="upload/12.jpg"></div>
</div>
</div>
<script src="ui/vendor/jquery/jquery-3.4.1.min.js"></script>
<script src="ui/vendor/owl-carousel/owl.carousel.min.js"></script>
<script>
$(function() {
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
margin: 0,
nav: true,
dots: true,
autoHeight:true,
responsive: {
0: {
items: 1,
slideBy: 1
}
}
});
});
</script>
</body>
</html>
In particular:
- use the latest version of jQuery
- I added the autoHeight
Example: https://psdtohtml.dev/download/sitepoint-01/index.html
Download source: https://psdtohtml.dev/download/sitepoint-01/carousel.zip
1 Like
Hi, I just updated the code: I added a text with links, as you wrote at the beginning. I hope it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link href="ui/vendor/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="ui/vendor/owl-carousel/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
.owl-carousel {
position: relative;
}
.owl-dots {
margin-top: 10px;
text-align: center;
}
.owl-dot span {
background-color: black;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 0 4px;
width: 8px;
}
.owl-nav {
font-size: 40px;
}
.owl-carousel .owl-nav .owl-prev {
bottom: -15px;
left: 0;
position: absolute;
}
.owl-carousel .owl-nav .owl-next {
bottom: -15px;
right: 0;
position: absolute;
}
.item {
background-color: lightgray;
height: 400px;
position: relative;
text-align: center;
width: 100%;
}
.item img {
display: inline-block !important;
height: 100%;
width: auto !important;
}
.caption {
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
color: white;
font-size: 14px;
left: 0;
padding: 10px;
position: absolute;
width: 100%;
}
.caption a {
color: red;
}
</style>
</head>
<body>
<div style="max-width: 768px;">
<div class="owl-carousel">
<div class="item">
<img src="upload/1.jpg">
<div class="caption">
[1] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/2.jpg">
<div class="caption">
[2] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/3.jpg">
<div class="caption">
[3] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/4.jpg">
<div class="caption">
[4] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/5.jpg">
<div class="caption">
[5] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/6.jpg">
<div class="caption">
[6] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/7.jpg">
<div class="caption">
[7] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/8.jpg">
<div class="caption">
[8] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/9.jpg">
<div class="caption">
[9] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/10.jpg">
<div class="caption">
[10] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/11.jpg">
<div class="caption">
[11] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
<div class="item">
<img src="upload/12.jpg">
<div class="caption">
[12] Lorem <a href="#" title="">ipsum dolor sit</a> amet, consectetur.
</div>
</div>
</div>
</div>
<script src="ui/vendor/jquery/jquery-3.4.1.min.js"></script>
<script src="ui/vendor/owl-carousel/owl.carousel.min.js"></script>
<script>
$(function() {
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
margin: 0,
nav: true,
dots: true,
autoHeight:true,
responsive: {
0: {
items: 1,
slideBy: 1
}
}
});
});
</script>
</body>
</html>
Link demo example updated
First of all thank you so much for all of your help. There is a lot to digest here, so let me look at the code in more detail before I ask any more questions, however, this is exactly what I am looking for. One question. Regarding the slide images, I am assuming there is no was to do this with the CSS, so what are the best practices for sizing images for carousels?
If you want to view the images always in full, the published example is what you can get. You can change the size in height so that they are a little larger. In the example I set a maximum width. You can set this to 100%.
If you want the image to cover the whole area, you need to crop it. This can be done in several ways:
- manual photo cropping
- using the image as background (using the center position and size cover)
- use of a CSS property called cover to apply to the image itself but not compatible with some older browsers.
Finally, you can have the images always full; the slider changes height according to the photo. This solution, however, forces the content below to rise and fall continuously. It’s not nice to look at.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.