1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[HELP] Flexslider problem: Only showing One Slide- Not Sliding

Discussion in 'Web Design' started by acapitalTee, Jan 16, 2015.

  1. acapitalTee

    acapitalTee Power Member

    Joined:
    Dec 20, 2012
    Messages:
    584
    Likes Received:
    235
    So I recently installed a new theme and my slider will not work. I am a complete novice when it comes to html/ css and whatnot and can't figure out how to fix the issue.

    The slider only shows one image although I've added the images to my html code. Also, I've checked to see if I have the javascript in the header and it is.

    Please help.

    Here's the code:
    Code:
     <aside class='widget widget-slider cf flyin inview' id='zp-slider-2'>              <div class='main-slider flexslider'>
                    <div class='flex-viewport' style='overflow: hidden; position: relative;'>
                      <ul class='slides' style='width: 1400%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-1860px, 0, 0);'>
                        <li class='clone' style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE1' src='http://3.bp.blogspot.com/IMAGEFILE1.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                  IMAGE SLIDE TITLE 1 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li class='' style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE2' src='http://2.bp.blogspot.com/IMAGEFILE2.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                 IMAGE SLIDE TITLE 2 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li class='flex-active-slide' style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE3' src='http://2.bp.blogspot.com/IMAGEFILE3.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                 IMAGE SLIDE TITLE 3 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE4' src='http://3.bp.blogspot.com/IMAGEFILE4.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                  IMAGE SLIDE TITLE 4 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE5' src='http://3.bp.blogspot.com/IMAGEFILE5.png'/>
                            <div class='overlay-title'>
                              >
                              <h2 class='slider-title'>
                                <a href='#'>
                                  IMAGE SLIDE TITLE 5 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE6' src='http://1.bp.blogspot.com/IMAGEFILE6.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                  IMAGE SLIDE TITLE 6 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                        <li class='clone' style='width: 930px; float: left; display: block;'>
                          <div class='slider-item'>
                            <img alt='TITLE7' src='http://1.bp.blogspot.com/IMAGEFILE7.png'/>
                            <div class='overlay-title'>
                              <h2 class='slider-title'>
                                <a href='#'>
                                 IMAGE SLIDE TITLE 7 HERE
                                </a>
                              </h2>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <ul class='flex-direction-nav'>
                      <li>
                        <a class='flex-prev' href='#'>
                          <i class='icon-left-open-big'/>
                        </a>
                      </li>
                      <li>
                        <a class='flex-next' href='#'>
                          <i class='icon-right-open-big'/>
                        </a>
                      </li>
                    </ul>
                  </div>
                </aside>
     
  2. acapitalTee

    acapitalTee Power Member

    Joined:
    Dec 20, 2012
    Messages:
    584
    Likes Received:
    235
    Solved the problem. I had the jquery codes out of order in the head section. Ughhhh, learning coding is so tedious.
     
  3. nocare

    nocare Junior Member

    Joined:
    Apr 29, 2013
    Messages:
    164
    Likes Received:
    81
    Location:
    Deep Code
    Oh It happens, that specifically you can occasionally still encounter even doing this a long time.
    As a good practice, you should put all your non-compatibility (html5shiv, etc) related javascript just before the end of the body tag.
    Just helps make sure the page is mostly loaded before js tries to act on it.
     
  4. Nauman K

    Nauman K Regular Member Premium Member

    Joined:
    Oct 9, 2012
    Messages:
    240
    Likes Received:
    12
    Occupation:
    CEO at Nausal Technologies (www.nausal.com)
    Location:
    Dream Land
    Home Page:
    What's the slider plugin name by the way?
     
  5. Nauman K

    Nauman K Regular Member Premium Member

    Joined:
    Oct 9, 2012
    Messages:
    240
    Likes Received:
    12
    Occupation:
    CEO at Nausal Technologies (www.nausal.com)
    Location:
    Dream Land
    Home Page:
    I would suggest you should use revaluation slider plugin BUT use the updated version.
     
  6. labs8vivek

    labs8vivek BANNED BANNED

    Joined:
    Oct 16, 2012
    Messages:
    166
    Likes Received:
    22
    Are you using wp there are many free slider plugins why messing with code if its not working