The website I'm developing is responsive in nature i.e. the website design gets adjust according to the device on which it is browsed. I've used Bootstrap framework for it.
I'm using Jssor JQuery Image slider in my website. It's working fine and perfect for me on all devices and all popular well-known browsers. The only issue I'm facing is when it is viewed on iPhone the size of sliding images in Jssor slider should get changed to dimensions 460 px * 280 px. In other words, the Jssor image slider should look somewhat bigger than the current size. But while doing this the aspect ratio of the images appearing in slider should be maintained.
Also when the website is viewed on iPhone the image slider should occupy the whole horizontal screen. That is the image slider shouldn't have any white space appearing around the slider. Currently two vertical blank bars are appearing on both sides of the slider.
Initially when the website is viewed on a browser on PC or laptop the resolution of slider images is 940 px * 370 px and it gets auto adjust as per the size of the device on which it it browsed.
The said dimension change should happen only on iPhone and not on any other devices. On other devices it's working absolutely fine and perfect. Also the aspect ratio of the images should not get disturb in this process.
For your reference I'm putting below the HTML code and jQuery code of the slider. All the necessary library files have been included.
HTML code :
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
</div>
<div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
<style>
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
background: url(img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
background-position: -97px -7px;
}
.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(img/a12.png) no-repeat;
overflow: hidden;
}
.jssora12l {
background-position: -16px -37px;
}
.jssora12r {
background-position: -75px -37px;
}
.jssora12l:hover {
background-position: -136px -37px;
}
.jssora12r:hover {
background-position: -195px -37px;
}
.jssora12ldn {
background-position: -256px -37px;
}
.jssora12rdn {
background-position: -315px -37px;
}
.captionOrange, .captionBlack {
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange {
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack {
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover {
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
.bricon {
background: url(img/browser-icons.png);
}
</style>
<span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
<span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>
jQuery code :
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];
var options = {
$AutoPlay: 1,
$AutoPlaySteps: 1,
$Idle: 3000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideDuration: 500,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$Cols: 1,
$Align: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 3,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$Steps: 1,
$Rows: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
</script>
//Your website
jQuery(document).ready(function ($) {
//...
function ScaleSliderDevices() {
var bodyWidth = DEVICE.Screen.width();
if (DEVICE.Screen.osDimVariation()) {
bodyWidth = DEVICE.Screen.width() + osWidthOffset();
}
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
};
//...
if (DEVICE.mobile())
{
$(window).bind('resize', ScaleSliderDevices);
}
//as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
ScaleSliderDevices();
}