Crazy Computer World: jQuery Carousel Slider for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_tb444twjHXiU-mtSNhI0N5Kk1zp3J2KXEyZWN-SrJmUA29V4WUHcBfupmi5j-lE9o_Ps_SGinCWnnL0OAv4lK-J0gkjwrOqb5OyPdwkEd78THeZvt4aKh5tU5Z0q-9gYVhO3q13fZRLs/s1600/screenshots-of-carousel-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_tb444twjHXiU-mtSNhI0N5Kk1zp3J2KXEyZWN-SrJmUA29V4WUHcBfupmi5j-lE9o_Ps_SGinCWnnL0OAv4lK-J0gkjwrOqb5OyPdwkEd78THeZvt4aKh5tU5Z0q-9gYVhO3q13fZRLs/s1600/screenshots-of-carousel-slider.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"><b>This is a responsive jQuery carousel slider. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. Here it is customized for blogger so you can just copy and paste the code to install on your blog. </b></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Let’s Install the jQuery Carousel Slider to your Blogger Blog</h3>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<ol>
<li><b>Go to Blogger Dashboard > Layout > Add a Gadget</b></li>
<li><b>Select HTML/Javascript</b></li>
<li><b>Copy the code below and paste on it.</b></li>
</ol>
<div>
<b><br /></b></div>
</div>
</div>
<blockquote>
<pre><code>
<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://crazycomputerworld1.blogspot.com/
*
* Copyright 2014 Crazy Computer World 
* Free to use.
*
* Contributing author: Yash Raj
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: <span style="color: red;">false</span>,
    itemWidth: <span style="color: red;">210</span>,
    itemMargin: <span style="color: red;">0</span>,
    minItems: <span style="color: red;">1</span>,
    maxItems: <span style="color: red;">4</span>
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
  </ul>
</div>
</code></pre>
</blockquote>
<br />
 <span style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> </span><span style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">4. Save, and were done.</span><br />
<br style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;" />
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">NOTE: </span></b><br />
<ul style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<li><b>Forget about width and height it will adjust auto.</b></li>
<li><b>There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.</b></li>
</ul>
<pre style="background-color: white; font-size: 14px; line-height: 22.399999618530273px;"><code><b>    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4</b></code></pre>
<pre style="background-color: white; color: #4f4f4f; font-size: 14px; line-height: 22.399999618530273px;"><code><span style="color: red;">
</span></code></pre>
<pre style="background-color: white; color: #4f4f4f; font-size: 14px; line-height: 22.399999618530273px;"><code><span style="color: red;">
</span></code></pre>
</div>

jQuery Carousel Slider for Blogger

This is a responsive jQuery carousel slider. It has some really cool features that makes you like it. The most cool feature is it is...

+ Read more »