Image Resizing issue

[parifuture]

Hello,
I am using the template on my website and I have implemented to Revolution Slider next to each other. It looks great for some screen resolutions but when using the same browser and a different screen resolution the text and the image get cut off. And when I move over to a handheld device then one slider lays on top of other, which is exactly what I want but then the image are getting cut off. Also the layers that I have added dont align well.
I have tried measures mentioned on this portal but non of them seem to work for me. I have tried, to go and modify the javascript code that initializes the Revolution Slider, and change the autoHeight property to be on and then add the data-bgfit=”contain” (from cover) element on the images that are getting used in the slider. When I make that change the two slider have a lot of gap in between them and it even when I look at the CSS I dont see any padding or margin in the slider elements. Can you please help. The website should be up and running. lmk if you have any questions.

Thanks,
P

---

[Support]

Hello, very sorry for the delay in responding, the fact is that I spent more than 1 hour trying to make that work in a better way, but unfortunately I found out that the Revolution Slider doesn’t work well when you have two instances of it side-by-side, the problem is that the calculations are not correct when the two sliders are next to each other, and the elements are in completely wrong positions. (Tried several things!). My suggestion is that you use the Nivo Slider – http://preview.oklerthemes.com/porto/3.3.2/index-slider-2.html – so you can set them the way you want, the only problem is that it doesn’t support captions, only simple images. But looking at your website I think it would be better with Nivo Slider:

<div class="col-md-6">
	<div class="nivo-slider">
		<div class="slider-wrapper theme-default">
			<div id="nivoSlider" class="nivoSlider">
				<img src="img/slides/slide-1.jpg" data-thumb="img/slides/slide-1.jpg" alt="" />
				<img src="img/slides/slide-2.jpg" data-thumb="img/slides/slide-2.jpg" alt="" />
			</div>
			<div id="htmlcaption" class="nivo-html-caption"></div>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="nivo-slider">
		<div class="slider-wrapper theme-default">
			<div id="nivoSlider2" class="nivoSlider">
				<img src="img/slides/slide-1.jpg" data-thumb="img/slides/slide-1.jpg" alt="" />
				<img src="img/slides/slide-2.jpg" data-thumb="img/slides/slide-2.jpg" alt="" />
			</div>
			<div id="htmlcaption" class="nivo-html-caption"></div>
		</div>
	</div>
</div>

JS (js/views/view.home.js):

if ($.isFunction($.fn.nivoSlider)) {
	$('#nivoSlider').nivoSlider({
		effect: 'random',
		slices: 15,
		boxCols: 8,
		boxRows: 4,
		animSpeed: 500,
		pauseTime: 3000,
		startSlide: 0,
		directionNav: true,
		controlNav: true,
		controlNavThumbs: false,
		pauseOnHover: true,
		manualAdvance: false,
		prevText: 'Prev',
		nextText: 'Next',
		randomStart: false
	});

	$('#nivoSlider2').nivoSlider({
		effect: 'random',
		slices: 15,
		boxCols: 8,
		boxRows: 4,
		animSpeed: 500,
		pauseTime: 3000,
		startSlide: 0,
		directionNav: true,
		controlNav: true,
		controlNavThumbs: false,
		pauseOnHover: true,
		manualAdvance: false,
		prevText: 'Prev',
		nextText: 'Next',
		randomStart: false

Thanks.

---

[Author]

Posts