Carousel cut off when scaling / resizing browser |
Carousel cut off when scaling / resizing browser |
dawgmom |
May 30 2019, 12:00 PM
Post
#1
|
Group: Members Posts: 2 Joined: 29-March 16 Member No.: 24,111 |
Please help me with this. Here's what the site I'm working on looks like as I scale my browser from right to left. The image is actually a JQuery slider and I'm trying to keep it centered with padding around it:
So, full width is fine, shrinking cuts off the slider until it centers at the smallest scale. I can't get the image to retain it's margin / padding as it resizes. Here's my section of HTML and the CSS. Thanks so much. P.S. The site isn't live yet but I could upload to a shared server if really necessary. HTML: CODE <div id="social44"> <div class="wnwslider wnwslidecontainersocial44" data-height="200" data-width="200"> <div class="wnwslider-inner" > <div class="wnwslide-item wnwslidesocial440"></div> <div class="wnwslide-item wnwslidesocial441"></div> </div> </div> </div> </div> CSS: CODE } .wnwcontent .wnwpostcontent-0 .layout-item-5 { color: #737373; background: #FFFFFF; padding-top: 17px; padding-right: 17px; padding-bottom: 17px; padding-left: 17px; text-align:center; } .wnwslidecontainersocial44 { width: 200px; height: 200px; margin-left: auto; margin-right: auto; position: relative; } .wnwslider-inner { overflow: auto; width: 100%; height: 100%; } .wnwslidesocial440 { background-image: url('images/social-4.png'); background-size: 200px; background-position: center center; background-repeat: no-repeat; } .wnwslidesocial441 { background-image: url('images/social-1.png'); background-size: auto auto; background-position: center center; background-repeat: no-repeat; } I'm also including the JQuery - I think this is where the wnwslide-item function is(?): CODE jQuery(function ($) { 'use strict'; if ($.fn.themeSlider) { $(".wnwslidecontainersocial44").each(function () { var slideContainer = $(this), tmp; var inner = $(".wnwslider-inner", slideContainer); inner.children().filter("script").remove(); var helper = null; if ($.support.themeTransition) { helper = new BackgroundHelper(); helper.init("fadeext", $(".wnwslide-item", inner).first().css($.support.themeTransition.prefix + "transition-duration")); inner.children().each(function () { helper.processSlide($(this)); }); } else if (browser.ie && browser.version <= 8) { var slidesInfo = { ".wnwslidesocial440": { "bgimage" : "url('images/slidesocial440.jpg')", "bgposition": "center top", "images": "", "positions": "" }, ".wnwslidesocial441": { "bgimage" : "url('images/slidesocial441.jpg')", "bgposition": "center top", "images": "", "positions": "" } }; $.each(slidesInfo, function(selector, info) { processElementMultiplyBg(slideContainer.find(selector), info); }); } inner.children().eq(0).addClass("active"); slideContainer.themeSlider({ pause: 2600, speed: 600, repeat: true, animation: "fade", direction: "next", navigator: slideContainer.siblings(".wnwslidenavigatorsocial44"), helper: helper }); }); } }); </script> |
Lo-Fi Version | Time is now: 21st May 2024 - 11:53 AM |