SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No images in slider

    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. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Looking at your source code you do not have any images in your slider:
    Code:
     <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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    64 Post(s)
    Tagged
    2 Thread(s)
    You also need a valid doctype at the top of your page.

    <html> NO

    <!doctype html> YES

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Your images go in the list not the css file:
    Code:
    <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. #6
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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. #11
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •