homepage Welcome to WebmasterWorld Guest from 54.205.144.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderator: open

Mobile Web Site Design and Development Forum

    
Issue on responsive Slider for desktop and mobile
Shreya




msg:4620240
 5:45 am on Oct 31, 2013 (gmt 0)

I am using a responsive slider but My slider is working perfectly in normal windows (Desktop). But while i am trying for Mobile in all devices not showing proper and not even rotate slider.

Here the link is below:

[phonixtvalves.com ]

My Html code is,

<div class="fullwidthbanner-container">
<div class="shadowdrop"></div>
<div class="fullwidthabnner">
<ul>
<!-- THE 1 SLIDE -->
<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="300" data-delay="9500"> <img src="img/rs-slider/slides/bg/1.jpg" />
<div class="tp-caption lfb"
data-x="-130"
data-y="150"
data-speed="300"
data-start="300"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/rb.png" alt="">
</div>

<div class="tp-caption med-white lfl"
data-x="0"
data-y="145"
data-speed="300"
data-start="800"
data-easing="easeOutExpo">
Inspira designed for
</div>

<div class="caption sfb very-big-white""
data-x="0"
data-y="190"
data-speed="300"
data-start="1200"
data-easing="easeOutExpo">
winner
</div>


<div class="tp-caption small-white lfr"
data-x="0"
data-y="255"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">
<a href="#" class="button-white">Purchase Now</a>
</div>


<div class="tp-caption lfb"
data-x="390"
data-y="40"
data-speed="1000"
data-start="2000"
data-easing="easeOutExpo"
data-endeasing="fade"
>
<img src="img/rs-slider/slides/guy-shadow.png" alt="">
</div>

<div class="tp-caption small-white lft"
data-x="240"
data-y="0"
data-speed="2000"
data-start="2600"
data-easing="easeOutExpo">
<img src="img/rs-slider/slides/spotlight.png" alt="">
</div>

<div class="tp-caption fade"
data-x="390"
data-y="40"
data-speed="2000"
data-start="2600"
data-easing="easeOutExpo">
<img src="img/rs-slider/slides/guy.png" alt="">
</div>
</li>
<!-- THE 2 SLIDE -->
<li data-transition="papercut" data-slotamount="10"> <img src="img/rs-slider/slides/bg/2.jpg">
<div class="caption large_text sfb"
data-x="300"
data-y="207"
data-speed="300"
data-start="800"
data-easing="easeOutExpo">
<img src="img/rs-slider/slides/our-features.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="220"
data-y="115"
data-speed="300"
data-start="1000"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/lu.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="110"
data-y="85"
data-speed="300"
data-start="1200"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/clean.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="180"
data-y="217"
data-speed="300"
data-start="1400"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/lm.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="0"
data-y="217"
data-speed="300"
data-start="1600"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/responsive.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="220"
data-y="285"
data-speed="300"
data-start="1800"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/lb.png" alt="">
</div>

<div class="tp-caption sfr"
data-x="40"
data-y="345"
data-speed="300"
data-start="2000"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/bootstrap.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="625"
data-y="115"
data-speed="300"
data-start="2200"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/ru.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="730"
data-y="85"
data-speed="300"
data-start="2400"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/solid.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="650"
data-y="217"
data-speed="300"
data-start="2600"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/rm.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="770"
data-y="217"
data-speed="300"
data-start="2800"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/lightweight.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="625"
data-y="285"
data-speed="300"
data-start="3000"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/rb.png" alt="">
</div>

<div class="tp-caption sfl"
data-x="730"
data-y="345"
data-speed="300"
data-start="3200"
data-easing="easeOutBack">
<img src="img/rs-slider/slides/fresh.png" alt="">
</div>

</li>
<!-- THE 3 SLIDE -->



</ul>
<div class="tp-bannertimer"></div>
</div>
</div>


My css code is,


/*-----------------------------------------------------------------------------

KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT

Screen Stylesheet

version: 1.0
date: 07/27/11
author:themepunch
email: support@themepunch.com
website: http://www.themepunch.com
-----------------------------------------------------------------------------*/





/*********************************************************************************************
-SET THE SCREEN SIZES FOR THE BANNER IF YOU WISH TO MAKE THE BANNER RESOPONSIVE -
**********************************************************************************************/

/*-THE BANNER CONTAINER (Padding, Shadow, Border etc. )-*/

.bannercontainer { background-color:#fff; width:960px; position:relative; position:relative; margin-left:auto; margin-right:auto; }

.banner { width:960px; height:500px; position:relative; overflow:hidden; }

.bannercontainer-simple { padding:0px; background-color:#fff; width:960px; position:relative; position:relative; margin-left:auto; margin-right:auto; }

.banner-simple { width:960px; height:500px; position:relative; overflow:hidden; }

.fullwidthbanner-container { border-bottom: 1px solid #eee; width:100% !important; position:relative; padding:0; max-height: 100%; overflow:hidden; }

.fullwidthbanner-container .fullwidthabnner { width:100% !important; max-height:400px!important;position:relative; }

#video_link img { max-width: 100%; }
@media only screen and (min-width: 768px) and (max-width: 959px) {
.banner, .bannercontainer {
width:760px;
height:395px;
}
#video_link, #video_frame {
width:760px;
height:395px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.banner, .bannercontainer {
width:480px;
height:250px;
}
#video_link, #video_frame {
width:707px;
height:396px;
}
/* #video_link ,#video_frame{width:504px; height:282px;} */


}
@media only screen and (min-width: 0px) and (max-width: 479px) {
.banner, .bannercontainer {
width:320px;
height:166px;
}
#video_link, #video_frame {
width:360px;
height:201px;
}
}

.fb_iframe_widget iframe { z-index: 120; }

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved