No images in slider

HTML & CSS
1

Hi,

I am just getting started with web design and I can’t find out where the problem is. The slider is a plugin that I took from this site. I want to display pictures, but they simply don’t appear. I set them as a background-image for the <li>'s and set them to a width of 100% and a special height. I think it is the only way to align them and to make the slider responsive.

This is the website.

Thank you for your support.

Paul.

2

Looking at your source code you do not have any images in your slider:


 <ul class="slides">
                                <li class="slide 1" style="width: 100%"><div class="box1"></div></li>
                                <li class="slide 2" style="width: 100%"><div class="box2"></div></li>
                                <li class="slide 3" style="width: 100%"><div class="box3"></div></li>
                                <li class="slide 4" style="width: 100%"><div class="box4"></div></li>
                                <li class="slide 5" style="width: 100%"><div class="box5"></div></li>
                                <li class="slide 6" style="width: 100%"><div class="box6"></div></li>
                        </ul>

<div class=“box1”></div> Should be the path to the image and you have a division there.

3

You also need a valid doctype at the top of your page.

<html> NO

<!doctype html> YES

4

I put the images as background-images, so you can see them in the slider.css file. I just changed the doctype thing, thanks.
I can’t fix the problem by putting the background-image on the box class.

EDIT: I just changed the website by putting the background-images on the box1 class, set the width to 100% and the height to auto. No solution found yet.

5

Your images go in the list not the css file:


<ul class="slides">
                                <li class="slide 1" style="width: 100%"><img src="image1.jpg"></li>
                                <li class="slide 2" style="width: 100%"><img src="image2.jpg"></li>
                                <li class="slide 3" style="width: 100%"><img src="image3.jpg"></li>
                                <li class="slide 4" style="width: 100%"><img src="image4.jpg"></li>
                                <li class="slide 5" style="width: 100%"><img src="image5.jpg"></li>
                                <li class="slide 6" style="width: 100%"><img src="image6.jpg"></li>      
                        </ul>
6

I tried it in the beginning, but I thought it is not possible to center them horizontally. Margin auto on both sides doesn’t work. Another point is, that the background-image and the background-size: cover would make it totally responsive. I don’t think that the img solution will keep that responsiveness.

Thank you.

7

Please help me the problem still consists. I can’t align them when I do it like Rubble wrote.

Thanks.

iPhone 5s via tapatalk.

8

There are lots of responsive galleries out there, such as bxSlider, so save yourself some misery and just get one that already works the way you want. :slight_smile:

9

There must be a way without going into the jQuery. On the glide.js website the images are aligned as well, but I can’t figure out why. Glide.js is a responsive one which is hard to find.

iPhone 5s via tapatalk.

10

If you want to stick with Glide, at least make sure you’ve let it up the way it’s set up on the demo site. In their code, they have a different class on each LI, which then feeds in a different background image each time.

11

Alright. I just found out that I forgot to set the width and height of the li, thats why no background appeared. I knew there was a way with the background-image. Thank you for supporting and helping me!