0 Replies - 399 Views - Last Post: 09 September 2017 - 02:56 AM

#1 newb11  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 30-April 16

My jQuery carousel refuses to fit into my responsive grid

Posted 09 September 2017 - 02:56 AM

I have spent a week on this and have come to conclusion that it must be something wrong with the settings of my jQuery waterwheel carousel, most likely in how I have implemented or adjusted it, which makes the carousel completely ignore my responsive layout. I use w3.css responsive templates, have tried to put the carousel in several templates without changing the templates, and the carousel overlays everything and has no respect for the responsive grid whatsoever.
This is the design the way it is supposed to be Posted Image and this is the worst nightmare scenario that happens in mobile Posted Image
Im faaar from an being an experienced developer and need help...
What could I have done wrong when implementing the carousel??

This is the HTML of the div with the carousel implementation:

<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-white w3-collapse w3-top w3-large w3-padding-large" style="z-index:3;width:350px;font-weight:bold;" id="mySidebar">sidebar code</nav>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-row" style="margin-left:340px;margin-right:15px">
<!-- Main -->
<div class="w3-col m9 19"> 
    <div class="w3-container" id="designers" style="margin-top:75px">
        <div style="margin:auto;">
         <ul style="list-style-type:none;" id="carousel">
                <li><a class="magnificpopup" href="images/cookbook_cover_th.jpg">
                <img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/></a></li>
                <li></li>
          </ul>
 </div> </div> 
</div>
<!--right sidebar -->
<div class="w3-col m3 13">right div code....</div>



The css is the regular w3.css w3.css file
But even with perfectly functional template and intact css the carousel overlays other content.

The script part with the adjustments I have done to the carousel:
<!-- note: should work with jQuery 1.4 and up -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#carousel").waterwheelCarousel({
       startingItem:               1,   // item to place in the center of the carousel. Set to 0 for auto
    separation:                 255, // distance between items in carousel
    separationMultiplier:       0.6, // multipled by separation distance to increase/decrease distance for each additional item
    horizonOffset:              0,   // offset each item from the "horizon" by this amount (causes arching)
    horizonOffsetMultiplier:    1,   // multipled by horizon offset to increase/decrease offset for each additional item
    sizeMultiplier:             0.6, // determines how drastically the size of each item changes
    opacityMultiplier:          0.7, // determines how drastically the opacity of each item changes
    horizon:                    0,   // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
    flankingItems:              2,   // the number of items visible on either side of the center                  

    // animation
    speed:                      3000,      // speed in milliseconds it will take to rotate from one to the next
    animationEasing:            'swing', // the easing effect to use when animating
    quickerForFurther:          true,     // set to true to make animations faster when clicking an item that is far away from the center
    edgeFadeEnabled:            true,    // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image
    
    // misc
    linkHandling:               2,                 // Determines behavior of links that are placed around the images. 1 to disable all (if you want to use the callback functions to do something special with the links; or used for facebook), 2 to disable all but center (to link images out).You can wrap all of the images in links if you'd like. Most people will probably want to add links around each image, but only activate the links when the center item is clicked. This is the default use case. However, you can turn all of the links off if you prefer using the callback functions to handle the links. 
    autoPlay:                   300,                 // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Positive value for a left to right movement, negative for a right to left. 
    orientation:                'vertical',      // indicate if the carousel should be 'horizontal' or 'vertical'
    activeClassName:            'carousel-center', // the name of the class given to the current item in the center
    keyboardNav:                true,             // set to true to move the carousel with the arrow keys
    keyboardNavOverride:        false,              // set to true to override the normal functionality of the arrow keys (prevents scrolling)
    imageNav:                   true,              // clicking a non-center image will rotate that image to the center.False to disable that functionality, which is commonly paired with navigational buttons instead.

    // preloader
    preloadImages:              true,  // disable/enable the image preloader.The carousel will attempt to preload all images before initializing. This is known to have some issues in certain browsers. The main reason for the preloader is too be able to determine the dimensions for each image before running calculations. If you run into issues, disable this and use the forced proportions below (or set your image dimensions using CSS). 
    forcedImageWidth:           0,     // Set a global width that should be applied to all images in the carousel. specify width of all images; otherwise the carousel tries to calculate it
    forcedImageHeight:          0,     // Set a global height that should be applied to all images in the carousel. specify height of all images; otherwise the carousel tries to calculate it

    // callback functions
    movingToCenter:             $.noop, // fired when an item is about to move to the center position
    movedToCenter:              $.noop, // fired when an item has finished moving to the center
    clickedCenter:              $.noop, // fired when the center item has been clicked
    movingFromCenter:           $.noop, // fired when an item is about to leave the center position
    movedFromCenter:            $.noop 
	  
	  // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
});
</script>


What can I do to make the carousel stay put in the middle div of my page?? Please help!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1