javascript - jQuery carousel making responsive -

-

i have carousel not responsive , need make responsive not sure current carousel ive found online ive been using.

can maybe me responsive? going images - many in advance

http://codepen.io/anon/pen/rnpyqq

html:

<div id="slider">   <a href="#" class="control_next">></a>   <a href="#" class="control_prev"><</a>   <ul>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>   </ul>   </div>

js:

jquery(document).ready(function ($) {      setinterval(function () {         moveright();     }, 3000);      var slidecount = $('#slider ul li').length;     var slidewidth = $('#slider ul li').width();     var slideheight = $('#slider ul li').height();     var sliderulwidth = slidecount * slidewidth;      $('#slider').css({ width: slidewidth, height: slideheight });      $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth });      $('#slider ul li:last-child').prependto('#slider ul');      function moveleft() {         $('#slider ul').animate({             left: + slidewidth         }, 200, function () {             $('#slider ul li:last-child').prependto('#slider ul');             $('#slider ul').css('left', '');         });     };      function moveright() {         $('#slider ul').animate({             left: - slidewidth         }, 200, function () {             $('#slider ul li:first-child').appendto('#slider ul');             $('#slider ul').css('left', '');         });     };      $('a.control_prev').click(function () {         moveleft();     });      $('a.control_next').click(function () {         moveright();     });  });

css:

@import url(http://fonts.googleapis.com/css?family=open+sans:400,300,600);    html {   border-top: 5px solid #fff;   background: #58ddaf;   color: #2a2a2a; }  html, body {   margin: 0;   padding: 0;   font-family: 'open sans'; }  h1 {   color: #fff;   text-align: center;   font-weight: 300; }  #slider {   position: relative;   overflow: hidden;   margin: 20px auto 0 auto;   border-radius: 4px; }  #slider ul {   position: relative;   margin: 0;   padding: 0;   height: 200px;   list-style: none; }  #slider ul li {   position: relative;   display: block;   float: left;   margin: 0;   padding: 0;   width: 1130px;   height: 775px;   background: #ccc;   text-align: center;   line-height: 300px; }  a.control_prev, a.control_next {   position: absolute;   top: 40%;   z-index: 999;   display: block;   padding: 4% 3%;   width: auto;   height: auto;   background: #2a2a2a;   color: #fff;   text-decoration: none;   font-weight: 600;   font-size: 18px;   opacity: 0.8;   cursor: pointer; }  a.control_prev:hover, a.control_next:hover {   opacity: 1;   -webkit-transition: 0.2s ease; }  a.control_prev {   border-radius: 0 2px 2px 0; }  a.control_next {   right: 0;   border-radius: 2px 0 0 2px; }  .slider_option {   position: relative;   margin: 10px auto;   width: 160px;   font-size: 18px; }

update: have made css 100% in width , height aut js needs work think , dont know here sets ontainer height , width margin stuff move etc... can me please?

you can calculate li's width using document's width , width of ul taken care of.

js

    //get width of document here , set li     $('#slider ul li').css({"width":($(document).width()-200)});      var slidecount = $('#slider ul li').length;     var slidewidth = $('#slider ul li').width();     var slideheight = $('#slider ul li').height();     var sliderulwidth = slidecount * slidewidth;      $('#slider').css({ width: slidewidth, height: slideheight });       $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth });

css

#slider ul li {       /* other css */      height: 100%;    }

and image responsive respect parent

#slider ul li img {   max-width: 100%;  max-height: 100%; }

demo

on window resize updated fiddle


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more