Background image slider..

Hello,

I tried 2 sliders for background image animation but neither works. Could you please help me out to solve this matter?
Thank you for your great support.

**
On the first slider, speed, animation, arrows, and pagination don't work. but background images resizes well with different browser sizes.**

========================= Slider 1 ====================================================================================================================
<section id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 650px;z-index: 1" data-speed="600" data-loop="true" data-animation="fade" data-arrows="true" data-pagi="ture" >
<div class="swiper-container">
<div class="swiper-wrapper" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #333;">
<!--First Slide-->
<div class="swiper-slide" style="background: url('images/slider/index1.jpg') center center; background-size: cover; height: 100% !important;"></div>
<!--Second Slide-->
<div class="swiper-slide" style="background: url('images/slider/index2.jpg') center center; background-size: cover; height: 100% !important;"></div>
<!--Third Slide-->
<div class="swiper-slide" style="background: url('images/slider/index3.jpg') center center; background-size: cover; height: 100% !important;"></div>
</div>
</div>
</section>

================================================= slider 2 ========================================================================
The background Image animation works very well but they are not shrink when the browser resizes even if I put background-size: cover.

<section id="slider" class="slider-parallax swiper_wrapper clearfix hide" data-height-lg="650" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">

<div class="slider-parallax-inner">

<div class="fslider" data-speed="3000" data-pause="7500" data-animation="fade" data-arrows="true" data-pagi="ture" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #333;">
<div class="flexslider" style="height: 100% !important;">
<div class="slider-wrap" style="height: inherit;">
<div class="slide" style="background: url('images/slider/index1.jpg') center center; background-size: cover !important; height: 100% !important;"></div>
<div class="slide" style="background: url('images/slider/index2.jpg') center center; background-size: cover !important; height: 100% !important;"></div>
<div class="slide" style="background: url('images/slider/index3.jpg') center center; background-size: cover !important; height: 100% !important;"></div>
</div>
</div>
</div>
</div>
</section>

Thank you in advance.

can background images have different heights and widths, or are they restricted to one size? In other sliders, are different heights and widths of images supported. For example on the page: portfolio-single-gallery.html would all the images have to be the same size? Are all the thumbs the same size? Are thumbs created separately?

many thanks,
patrick
phogan2@yahoo.com