jquery - Caroufredsel > Center Current Item to certain margin while carousel container width is 100% -


i'm trying position current middle item in carousel in middle of 100% width. here's example image http://ww.prompt-dev.com/example.png, found hard explain plain words...

carousel width 100%. items visible 3. items width variable. scroll 1 item @ time.

here's caroufredsel setup i'm using far:

$('#carousel').caroufredsel({     width: "100%",     items: { visible: 3, minimum: 2, start: -1, width: 'variable' },     scroll: { items: 1, pauseonhover: true, duration: 1000, timeoutduration: 3000         ,onbefore: function(){             $('ul#carousel li')                 .animate({opacity:0.5}, 250);         },         onafter: function(){             $('ul#carousel li')                 .filter(':eq(1)')                 .animate({opacity:1}, 250);         }     },     auto: { play: false },     prev: { button: "#prev", key: "left" },     next: { button: "#next", key: "right" },     swipe: true });

and css:

#carousel_wrap {     height: 700px;     left: 0;     margin: 30px 0;     overflow: hidden;     position: relative;     width: 100%; }  ul#carousel li {     display: block;     float: left;     height: 700px;     margin: 0 7.5px;     position: relative; }

any appreciated!

this best can.

1 - added align center , responsive true js

$('#carousel').caroufredsel({     width: "100%",     align: 'center',     responsive  : true,     items: { visible: 3, minimum: 2, start: -1},     scroll: { items: 1, pauseonhover: true, duration: 1000, timeoutduration: 3000         ,onbefore: function(){             $('ul#carousel li')                 .animate({opacity:0.5}, 250);         },         onafter: function(){             $('ul#carousel li')                 .filter(':eq(1)')                 .animate({opacity:1}, 250);         }     },     auto: { play: true },     prev: { button: "#prev", key: "left" },     next: { button: "#next", key: "right" },     swipe: true });

2 - added on line 150 , 151 of css - text align center , overflow hidden

ul#carousel li {     display: block;     float: left;     height: 700px;     margin: 0 7.5px;     position: relative;     text-align: center;     overflow: hidden; }

here demo link: http://jsfiddle.net/ignaciocorreia/sbt9m/


Comments

Post a Comment

Popular posts from this blog

matlab - Deleting rows with specific rules -

i got 20*3 cell array , need delete rows contains "137", "2" , "n:t" origin data: 't' '' '' 'np(*)' '' '' [ 137] '' '' [ 2] '' '' 'are' 'and' 'np(fcc_a1#1)' '' '' '1:t' [ 1200] [0.7052] '' [1.2051e+03] [0.7076] '' 'are' 'and' 'np(fcc_a1#3)' '' '' '2:t' [ 1200] [0.0673] '' [1.2051e+03] [0.0671] '' 'are' 'and' 'np(m23c6)' '' '' '3:t' [ 1200] [0.227...
Read more

php - MySQLi multi_query results for later use -

i using mysqli multi_query work several select statemets @ time. know how handle results, able use them later in code. example: <?php //connection stuff $query = "select name, surname database1;"; $query.= "select car, year, type database2 carid='1';"; $query.= "select product, price database3;"; if ($mysqli->multi_query($query)) { if($result = $mysqli->store_result()) { while($row = $result->fetch_row()) { --> here? } } } ?> <html> <div id='persona'> <?php foreach() { --> print name + surname } ?> </div> <div id='cars'> <?php foreach() { --> print car + year + type } ?> </div> <div id='product'> <?php foreach() { --> print product + price } ?> </div> </html> one more thing, prepared statements not possible when using multiple_query, right? there no benefit in putting unrelated queries in 1 multi ...
Read more