Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    157
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Using Multiple Jquery Sliders on the same Page

    I'm having problems running 2 separate Jquery Plugins and I think they are conflicting with each other. Is there a known issue with this?

    Here is the code. I took out everything that wasn't related (or tried to hastily).



    They work seperately with the same code.. but together they both don't work.. any suggestions?
    Code:
    <!doctype html>
    
    <html>
    <head>
        <!-- CSS Links -->
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <link href="css/1140.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'
        type='text/css'>
        
        <!-- Javascript Links -->
        <script src="js/jquery.1.7.1.min.js" type="text/javascript"></script>
        <script src="js/js.js" type="text/javascript"></script>
        <script src="js/cube_gallery.min.js" type="text/javascript"></script>
        <script src="js/TweenMax.min.js" type="text/javascript"></script>
        <script src="js/modernizr.js" type="text/javascript"></script>
        <script src="js/jquery.als-1.4.min.js" type="text/javascript"></script>
        
            <!-- Javascript 3D Rotating Slider Functions -->
        
         <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="js/jquery.carousel-1.1.js"></script>
        
         <script type="text/javascript">
            $(document).ready(function(){
            
                $('.carousel').carousel({hAlign:'center', vAlign:'bottom', hMargin:0.4, vMargin:0.2});                              
                        
            });
        </script>
        
        <!-- Javascript Sliding Gallery Function -->
    
        <script type="text/javascript">
    $(document).ready(function(){
            $("#my-als-list").als({
        visible_items: 3,
        scrolling_items: 2,
        orientation: "horizontal",
        circular: "yes",
        autoscroll: "yes",
        interval: 6000,
        speed: 1200,
        easing: "linear",
        direction: "right",
        start_from: 1
        }); 
        }); 
        </script>
    
        <title>Mind Tools</title>
    </head>
    
    <body>
        <div class="fadeBG">
            <?php include("includes/header.php"); ?>
    
                <div class="container">
                    <div class="row">
                        <div class="twelvecol last">
                        
                        
                        <div class="carousel"> <!-- BEGIN CAROUSEL -->
        
        <div class="slides"> <!-- BEGIN SLIDES -->
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-1.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-2.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-3.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-4.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-5.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-6.jpg" />
                </a>            
            </div>
            
            <div> <!-- SLIDE ITEM -->
                <a href="#"> 
                    <img src="images/slide-7.jpg" />
                </a>            
            </div>
                                   
        </div> <!-- END SLIDES -->
           
    </div> <!-- END CAROUSEL -->
    
                        
                        
                        </div>
                    </div>
                </div>
            </div>
    
         
    
                    <div class="twelvecol fullLengthGreen marginSpecial last">
                        <div class="als-container" id="my-als-list">
                            <!-- if you choose manual scrolling (which is set by default), insert <span> with class "als-prev"  and "als-next": 
    they define the buttons "previous" and "next"; within the <span> you can use images or simple text -->
                            <!-- define a container with class "als-viewport": this will be the viewport for the list visible elements -->
    
                            <div class="als-viewport">
                                <!-- define a container with class "als-wrapper": this will be the wrapper for the list elements, 
    it can be a classic <ul> element or even a <div> element -->
    
                                <ul class="als-wrapper">
                                    <!-- define the list elements, each must have class "als-item"; they can be classic <li> elements 
    or generic <div> elements and they can contain anything: text, images, ... -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoOne.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoTwo.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoOne.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoTwo.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoOne.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoTwo.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoOne.png"></li><!-- image -->
    
                                    <li class="als-item"><img alt="Video Image"
                                    src="images/videoTwo.png"></li><!-- image -->
                                </ul><!-- als-wrapper end -->
                            </div><!-- als-viewport end -->
                        </div><!-- als-container end -->
                    </div>
                </div>
            </div><?php include("includes/footer.php"); ?>
        </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,226
    Thanks
    23
    Thanked 606 Times in 605 Posts
    My editor throws errors on the last two </div> tags; They do not have a start tag.

    You can run two sliders. The only problem I have heard about is the naming conventions used. Make sure your not calling the same thing in both sliders.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder
    Join Date
    Aug 2013
    Posts
    157
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Okay I will look into it. I took out out a bunch of code so you didn't have to look through all my code that is why the div tags were missing


  •  

    Posting Permissions

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