Необходимые js-файлы
jquery.smoothdivscroll-1.3-min
Css файл стандартный
Sass – код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
// customize bootstrap variables here: @import "bootstrap"; @import "compass"; $orange_color : #e78536; $gray_color : #ededed; #thumbnails_wrapper{ z-index : 2; position : relative; bottom : 0; width : 100%; height : 425px; background : none; padding : 0; z-index : 2; overflow : hidden; .thumbnails_wrapper_fon{ position : absolute; z-index : 20; right : 0; top : 0; height : 100%; width : 150px; background : url(/images/thumbnails_wrapper.png) right top repeat-y transparent; } #makeMeScrollable{ position : relative; padding : 0; width : 100%; margin : 0px auto; z-index : 1; .container{ position : relative; left : 0px; padding : 0; margin : 0 !important; } .content{ float :left; height : 425px; width : 300px; } div{ margin : 0px; height : 100%; a:link, a:active, a:visited{ display : block; padding : 30px 40px; background : none; border : solid 1px $gray_color; border-right : transparent; height : 425px; width : 300px; text-decoration : none; cursor : url(/images/cursor.png), pointer; .date{ display : inline-block; background : $gray_color; color : #353a3c; padding : 5px 10px; font-size : 14px; line-height : normal; } .title{ display : block; font-size : 20px; line-height : normal; color : $orange_color; background : none; margin : 25px 0; } .text{ display : block; font-size : 15px; line-height : 22px; color : #000000; } } a:hover{ background : $gray_color; border-bottom : solid 2px #eb7e26; .date{ background : #ffffff; } .title{ color : #353a3c; } } } } } |
HTML – код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<div id="thumbnails_wrapper"> <div id="makeMeScrollable"> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> <div class="content"> <div style=""> <a href="#"> <span class="date">24.01.2014</span> <span class="title">Улучшен сервис из Китая</span> <span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span> </a> </div> </div> </div> <script type="text/javascript"> // Initialize the plugin with no custom options $(document).ready(function () { // I just set some of the options $("#makeMeScrollable").smoothDivScroll({ touchScrolling: true, manualContinuousScrolling: true, hotSpotScrolling: false, mousewheelScrolling: false }); }); </script> </div> |
Link to this post!