All posts tagged “Slider”

Free jQuery Content Slider Scripts and Tutorials

You’re reading Free jQuery Content Slider Scripts and Tutorials, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

20+ Useful jQuery Content Slider Scripts and Tutorials

Maybe you’ve seen some businesses with beautifully designed websites that also have a content slider which displays their available products and services; and since then you’ve been asking yourself how it’s done? If you still haven’t found out, then lend me an ear, because here’s the answer. It’s done with jQuery. From year to year […]


Advertise here with BSA


Designmodo

Animated Content Slider with Bubble Navigation Icons

Please welcome another tutorial written by Jake Rocheleau, in this edition he will teach you how to create beautiful content slider with bubble navigation.
MonsterPost

How To Style HTML5 Range Slider Across Multiple Browsers

The range is one of the new input type introduced in HTML5. This input type allows one to input number within the specified range. The browsers will render this input type natively as a slider control. It’s a very intuitive user interface that we commonly find in an App. We can slide the handle bar to the right or left to produce the number within the range.

But as you can see above, each browser displays this input type in a slightly different taste that may not sit well with some designers. So in this article, we will show you how to style it in a more unified design form. If you are ready, let’s just get started.

In Chrome, Safari, and Opera

Safari and Opera are Webkit-based browsers. Though Chrome has decided to adopt its own engine, Blink, it looks like for the time being, Chrome still inherited several code bases from websites.

Webkit provides an easy way to style any input type, including range. To get started, we can select the input with the attribute selector and remove the native Webkit/Chrome styles by setting the -webkit-appearance to none.

 input[type=range] { -webkit-appearance: none } 

From this stage, we can add anything such as border, background color, rounder border and so on.

 .input[type=range] { -webkit-appearance: none; width: 100%; border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } 

As you can see below, the handle bar is the only remaining part from the input that is not affected from the above code.

To apply styles to it, we have to use Webkit proprietary pseudo-element selector ::-webkit-slider-thumband similarly remove the native styles with -webkit-appearance, like so.

 input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

And that’s how we style input type range in a Webkit browser. The style we added above should take effect on Chrome, Safari as well as the latest version of Opera. However, it would not affect Firefox and Internet Explorer as they run different engines. But we have workarounds for those two.

In Firefox

Adding styles directly with attribute selector input[type='range'] would not change the native styles of the input in Firefox. Instead, we have to use Firefox proprietary pseudo-element selector ::-moz-range-track and ::-moz-range-thumb.

The ::-moz-range-track will affect the input range track, while the ::-moz-range-thumb will affect the input handle bar.

 .firefox input[type=range]::-moz-range-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } .firefox input[type=range]::-moz-range-thumb { background: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

We apply the exact same styles. Open Firefox, and you should get a close result as in the Webkit browsers.

In Internet Explorer

Internet Explorer displays the input type range a lot different than the rest. To make it easier, here I have drawn a diagram showing the pieces that form the input.

IE will also show a tooltip showing the number you are one, as we slide through the handle bar.

Each of these input parts can be styled with IE proprietary pseudo-element ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks, and ::-ms-tooltip. Here we will also apply the same styles as in Webkit and Firefox.

 input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { background: transparent; } input[type="range"]::-ms-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } input[type="range"]::-ms-thumb { background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

But the output is not something that we’ve expected. The tick marks is visible, while the top and bottom of the handle bar are hidden.

We can easily remove the tick marks by adding step="any" to the input element. However, making the handle bar fully visible is something that is not possible. It is as if the input element has the overflow set to hidden, but it cannot be undone just by setting overflow to visible. This is something that I’m still trying to figure out. If you have solved this issue, you can share it in the comment box below.

Final Thought

The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. I hope there will be a standard that can regulate this matter in the future. Lastly, here is the link to see the input range we have shown you in this article.





hongkiat.com

Coding a Responsive Horizontal Posts Slider using CSS3 and jQuery

Any blog needs to have either a content slider or a recent posts slider. Today we’re going to teach you how to create a responsive horizontal posts slider.
MonsterPost

Implement a Dynamic Animated Slider using Glide.js

In this tutorial you will learn how to built a dynamic animated slider using Glide.js
Template Monster Blog

Build a Super Easy CSS Slider With Thumbnails

screenshot

Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. You’ll be blown away by how much you can achieve with just a few lines of code.

The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images. Let’s dive in and see how it works.

The Concept

The basic layout here is pretty simple. We want a strip of thumbnail images and one large featured image. The tricky part is getting the featured image to change when the user hovers over one of the thumbnails.

screenshot

Sneak Peek: Click here to launch the finished product.

With CSS, you can’t create two distinct divs and then have the contents of one serve as an action point for the other. It’s easy enough in JavaScript, but CSS gives you less freedom in the way that you stack your selectors.

However, if we’re clever about how we structure our HTML, this project is actually fairly simple to pull off. Let’s see what this looks like.

The HTML

To make this work, we’re going to need four thumbnail images and four full size images. The key to having the former act upon the latter is to wrap them up together like so:

</ br>

Here we have one anchor that surrounds both the small and the large image, and I’ve assigned a specific class to each. This will make it so that when the user hovers over one image, we can easily manipulate the other. We’ll see how all this works when we get to the CSS.

Now that we know how our page needs to be structured, we can repeat this pattern four times and throw it all into a container.

</ br>

Notice that I finished off with a single large image. The reason for this is that the big images will slide into place on hover, leaving a big empty space when nothing is being hovered over. To fill this spot, I created a custom image:

screenshot

This is all the HTML that we’ll need, now it’s time to jump over and style this sucker.

Container Styles

In your CSS file, create a style block for the container. We start by setting its position to relative. We’re going to use absolute positioning later and setting the container to relative positioning will give us a boundary to work with.

After that, set the height and width to the value shown below. These aren’t arbitrary mind you but have been carefully calculated. Each thumbnail image is 200px wide, times four equals eight hundred, plus margins (4*40) equals 960px. Similarly, the thumbnails are 200px high, the big image is 400px and there will be 30px of margins for a total 660px high.

.container {
  position: relative;
  height: 660px;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

</ br>

The reason we’re setting a specific height and width is so that we can slide an image out of the bounds of the container and have it be hidden. To this end, we also apply an overflow value of hidden and finish up by centering it all with auto margins.

Progress Check

We’re looking pretty rough at this point, but don’t worry, everything is right on track!

screenshot

Position Everything

As you just saw in the screenshot, your images are going to be all over the place at this point so now it’s time to coerce everything into its proper position.

Once again, this takes a little bit of hard thinking. We want all our thumbnails to group together and all of our big images to group together, but that’s not how the HTML is structured.

Given that each type of image (small and large) has its own class though, we can float all of our anchors to the left, and then separate out the large images by applying absolute positioning.

.container a {
  float: left;
  margin: 20px;
}

.big {
  position: absolute;
  top: 260px;
  left: 20px;
}

</ br>

It’s very important to understand how this works so let’s run through it. Floating our links to the left made all of the images appear inline, one right after another. However, the absolute positioning on the big images pulls them out of this flow and places them specifically in the spot that we’ve designated using the top and left properties. This leaves only the thumbnail images to be floated.

Progress Check

With very little code we were just able to transform our mess of images into a nicely arranged layout. Note that you’ll only see one large image at this point because the others are stacked under it.

screenshot

Bring It To Life

Now that everything is in place, it’s time to make it work. The first thing that we want to do is move all of the big images except our featured cover out of the bounds of the container. This involves taking a step back and revising some of our previous code.

Go back and set all of the big images to be 900px from the top. This will push them outside of the bottom of our container. While you’re in there, you should also set up a transition. Target the top property and set the transition duration to one second and the timing function to ease.

.big {
  position: absolute;
  top: 900px;
  left: 20px;

  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;
}

</ br>

This code pushes all of the big images out of bounds, including our cover image. Use the code below to bring this back.

.featured {
  top: 260px;
  left: 20px;
  z-index: -3;
}

</ br>

Here we used the top and left values that we had established before to fix the cover to one spot. The z-index value ensures that this image will remain on the bottom of the stack. If we don’t do this, we won’t even be able to see the other images when they slide in!

Hover Styles

Now that we’ve placed all of the big images outside of the container, we need to bring them back when the user hovers. This is accomplished by targeting the big images and returning the top property to 260px. I also added a shadow effect to the thumbnails so you can see the hover taking effect.

a:hover .thumb {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

a:hover .big {
  top: 260px;
}

</ br>

Because of the way we set up our HTML, each thumbnail automatically corresponds to its accompanying big image. So even though we’re hovering over the thumbnail, the browser sees it as all one anchor and doesn’t mind manipulating only the part with the big class applied. Pretty neat right?

See It In Action

With that, we’re all finished with our awesome slider. Take a look at the live demo below and hover over the thumbnails to give it a test drive. To showcase the versatility of this project, I included two alternate versions in the demo that implement slightly different animations. Be sure to check them out as well.

Demo: Click here to launch.

screenshot

Conclusion

If you were paying close attention, you learned a lot of stuff in this tutorial. First, we overcame the challenge of how to use one piece of an HTML document to act upon another using only CSS, which is no small feat. In addition to this, we learned some cool positioning techniques and even dabbled a bit with manipulating the image stacking order via z-index.

If you liked this tutorial, leave a comment and let us know. Do you have any other uses for remote hovers like we used here? I want to hear them!

Design Shack

Creating Touch-Enabled Slider with SwipeJS and jQuery [Tutorial]

Image/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it once in our previous tutorial. Today though, with the increasing number of people who are using touch-enabled devices, we may have to rethink how we build it.

Commonly, a slider is equipped with Next and Prev buttons to navigate the content, which works fine in a desktop computer. But, in touch devices, it would be better if the users were also able to slide-navigate with finger swipes. In today’s tutorial, we will show you how to build this using jQuery and SwipeJS.

Requirements

Let’s first get our ingredients and tools ready for the slider. We will need a style sheet and an HTML document, jQuery, SwipeJS, and a few images – in this tutorial, I’ll be using the fantastic photographs from Jared Lim.

Basic Setup

SwipeJS is very easy to set up. The following is the HTML markup. We need a div with an id, and one more div to wrap the list of the slides; each slide is also wrapped with a div and you can add anything in the slide, not just images.

 <div id='slider' class='swipe'> <div class='swipe-wrap'> <div><img src="img/cellumination.jpg" width="600" height="350"></div> <div><img src="img/color-zone.jpg" width="600" height="350"></div> <div><img src="img/diagonal-path.jpg" width="600" height="350"></div> <div><img src="img/fractal-reflection.jpg" width="600" height="350"></div> <div><img src="img/origami.jpg" width="600" height="350"></div> </div> </div> 

SwipeJS needs a few lines of basic style rules. These style rules define the slider width, and display the slide inline.

 .swipe { overflow: hidden; position: relative; max-width: 600px; width: 100%; height: 350px; margin: 100px auto 0; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float: left; width: 100%; position: relative; } 

Here is the JavaScript part that puts the slider into live. To make the script run properly, we need to ensure the whole document is loaded first. We can do so either by adding the script at the very bottom of the page, or using jQuery .ready() method, like so.

 $  (document).ready(function(){ // we add the code here }); 

Using jQuery, we can add Swipe function like so.

 Slider = $  ('#slider').Swipe().data('Swipe'); 

This is the basic setup, which will run the slider with the default configuration. SwipeJS accepts some parameters to change the default configuration. These parameters have to be set within the .Swipe(), for example:

 Slider = $  ('#slider').Swipe({ auto: 3000, continuous: false }).data('Swipe'); 

Utilizing the APIs

Furthermore, we can control our slider behavior with the provided APIs. In this example, using the .next() and .prev() method in SwipeJS, we can navigate.

First, let’s add the button, like so:

 <span class="nav prev">Prev</span> <span class="nav next">Next</span> 

Then coupled with the jQuery click event, we can do the following, so that when the users click on the button it will show the next slide or the previous one, as assigned.

 $  ('.next').on('click', Slider.next); $  ('.prev').on('click', Slider.prev); 

Now, you can see the slider in action in the demo page, and it is better to try this out in a touchscreen device.

References


    




hongkiat.com

20 Free Joomla Slider Extensions That Change the Way People See Your Website

For those of you who have Joomla based websites, we’ve handpicked today a great number of free gallery and slider Joomla extensions. All that remains is to download and install them. Go check the list out!

20 Free Joomla Slider Extensions That Change the Way People See Your Website is a post from: Template Monster Blog

The post 20 Free Joomla Slider Extensions That Change the Way People See Your Website appeared first on Template Monster Blog.

Template Monster Blog

Standing for the Mobile Web: Free Responsive jQuery Slider Plugins

Everyone is fond of nice banner rotators and jQuery, what’s more we all like freebies. So have a look at these free Responsive jQuery Slider Plugins. Feel free to use them for your projects.
Template Monster Blog

Free HTML5 Agro Theme with jQuery Fade Slider

Get a well-coded theme from professional designers completely free. Website template with jQuery Fade Slider for agro site.
Template Monster Blog