|
|
|
Количество элементов в карусели
|
|||
|---|---|---|---|
|
#18+
Доброго времени суток. Подскажите как установить количество элементов в jquery карусели, никак не разберусь. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 10.07.2015, 12:12 |
|
||
|
Количество элементов в карусели
|
|||
|---|---|---|---|
|
#18+
вот код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <title>Easy Paginate - styled demo</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="js/easypaginate.js"></script> <script type="text/javascript"> jQuery(function($){ $('ul#items').easyPaginate({ step:3 }); }); </script> <style> /* HTML elements */ html,body{margin:0;padding:0;} h1, h2, h3, h4, h5, h6{ font-weight:normal; margin:0; line-height:1em; } h1{font-size:2em;margin-bottom:.5em;} h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;} h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;} h4{font-size:1.25em;margin-bottom:.6em;} h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;} p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;} ul, ol, dl{padding:0;} ul ul, ul ol, ol ol, ol ul, dd{margin:0;} li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;} blockquote, dd{padding:0 0 0 2em;} pre, code, samp, kbd, var{font:100% mono-space,monospace;} pre{overflow:auto;} abbr, acronym{ text-transform:uppercase; border-bottom:1px dotted #000; letter-spacing:1px; } abbr[title], acronym[title]{cursor:help;} small{font-size:.9em;} sup, sub{font-size:.8em;} em, cite, q{font-style:italic;} img{border:none;} hr{display:none;} table{width:100%;border-collapse:collapse;} th,caption{text-align:left;} form div{margin:.5em 0;clear:both;} label{display:block;} fieldset{margin:0;padding:0;border:none;} legend{font-weight:bold;} input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;} /* // HTML elements */ /* base */ body, table, input, textarea, select, li, button{ font:1em Helvetica, Arial, Sans-Serif; line-height:1.5em; color:#333; } body{ font-size:12px; background:#fff; margin:0; padding:20px; } a, a:visited{ text-decoration:none; color:#06C; } a:hover{color:#999;} /* base */ /* content */ #container{ margin:0 auto; width:818px; text-align:left; position:relative; padding:2em 0; } ul#items{ margin:1em 0; width:auto; height:245px; overflow:hidden; } ul#items li{ list-style:none; float:left; height:240px; overflow:hidden; margin:0 4px; background:#DBDAE0; color:#fff; text-align:center; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 1px 1px #777; -webkit-box-shadow:0 1px 1px #777; box-shadow:0 1px 1px #777; color:#555; } ul#items li:hover{color:#333;} ul#items li .image{ margin:20px 20px 10px 20px; width:300px; height:200px; overflow:hidden; border:2px solid #fff; -moz-box-shadow:0 1px 1px #bbb; -webkit-box-shadow:0 1px 1px #bbb; box-shadow:0 1px 1px #bbb; } ul#items h3{text-transform:uppercase;font-size:14px;font-weight:bold;margin:.25em 0;text-shadow:#f1f1f1 0 1px 0;} ul#items .info{color:#999;text-shadow:#f1f1f1 0 1px 0;} ol#pagination{position:relative;text-align:center;} ol#pagination li{ display:inline-block; width:16px; height:16px; background:url(images/bg_buttons.png) no-repeat 0 0; text-align:left; text-indent:-8000px; list-style:none; cursor:pointer; margin:0 2px; } ol#pagination li:hover{background:url(images/bg_buttons.png) no-repeat 0 -16px;} ol#pagination li.current{color:#f00;font-weight:bold;background:url(images/bg_buttons.png) no-repeat 0 -32px;} ol#pagination li.prev, ol#pagination li.next{ position:absolute; top:-150px; } ol#pagination li.prev{left:-30px;background:url(images/bg_buttons.png) no-repeat 0 -64px;} ol#pagination li.next{right:-30px;background:url(images/bg_buttons.png) no-repeat 0 -48px;} /* // content */ </style> </head> <body> <div id="container"> <h1>Easy Paginate</h1> <p>Click on the links below to navigate through items</p> <ul id="items"> <li> <p class="image"><a href=" http://templatica.com"><img src="images/slider1.jpg" alt="Template preview" /></a></p> <h3>Template 01</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/02.jpg" alt="Template preview" /></a></p> <h3>Template 02</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/03.jpg" alt="Template preview" /></a></p> <h3>Template 03</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/03.jpg" alt="Template preview" /></a></p> <h3>Template 04</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/05.jpg" alt="Template preview" /></a></p> <h3>Template 05</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/06.jpg" alt="Template preview" /></a></p> <h3>Template 06</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/07.jpg" alt="Template preview" /></a></p> <h3>Template 07</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/08.jpg" alt="Template preview" /></a></p> <h3>Template 08</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/09.jpg" alt="Template preview" /></a></p> <h3>Template 09</h3> <p class="info">Pretty cool template</p> </li> <li> <p class="image"><a href=" http://templatica.com"><img src="images/10.jpg" alt="Template preview" /></a></p> <h3>Template 10</h3> <p class="info">Pretty cool template</p> </li> </ul> </div> <p><a href=" http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination" title="read more about this plugin">back to the article</a></p> <p><strong>Easy Paginate plugin</strong> is brought to you by <a href=" http://cssglobe.com" title="web standards magazine and css news">Css Globe</a>, <a href=" http://easyframework.com">Easy front-end framework</a> and supported by <a href=" http://templatica.com">Css Templates</a> by Templatica</p> </body> </html> ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 10.07.2015, 14:53 |
|
||
|
|

start [/forum/topic.php?fid=22&gotonew=1&tid=1445856]: |
0ms |
get settings: |
4ms |
get forum list: |
10ms |
check forum access: |
2ms |
check topic access: |
2ms |
track hit: |
96ms |
get topic data: |
6ms |
get first new msg: |
4ms |
get forum data: |
2ms |
get page messages: |
26ms |
get tp. blocked users: |
1ms |
| others: | 221ms |
| total: | 374ms |

| 0 / 0 |
