jQuery Pretty Image Slider v1.0 with partially visible side slides

Hello Friends, I have got inspired by some premium sliders so I have coded a slider which looks very premium and can take any number of images.

The highlight of this slider is it shows partially visible side slides means previous and Next Slide.

This slider works using the Pure javascript only the transition and Showing previous and next slides part have been coded using frameworks like jQuery and Animate.css

The Slider is Fast can take the full width of the screen or the width of the container. It depends on users.

Transitions are added using Animate.css library with jQuery. More than 5 transition effects have been added and it will take random effect automatically on every change of slide.

We will develop the version 2.0 where there will be the possibility of adding content also with images.

The Slide has a lot of scope for customization from the looks to functionality.  Users can customize it according to their preference

We have created this slider and uploaded it to GitHub so that it get support and updates too. Users can ask questions and also can contribute to making this slider more awesome.

Features:

1. jQuery Pretty Image Slider is Responsive.
2. jQuery Pretty Image Slider  Shows half of the previous and next slides.
3. jQuery Pretty Image Slider has Random Transition Effects.
4. jQuery Pretty Image Slider looks very elegant and premium.

Demo to the Slider.

Demo

You can resize the browser and check its responsiveness.

Now Let start the steps to add it and show you the code to show this slider on your blogs or websites.

Here is the code below.:

<link rel="stylesheet" href="https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<div class="sliderWrap">
    <div class="slider">
        <div id="prev" class='prev prevSection navigate'>

            <span>&#8249;</span>
        </div>
        <div id='slidesContainer' class='slidesWrap'>
            <div class="slide active">
                <img src="Your-image-url-here" alt="First Image" title='1'>
            </div>
            <div class="slide">
                <img src="Your-image-url-here" alt="Second Image" title='2'>
            </div>
            <div class="slide">
                <img src="Your-image-url-here" alt="Third Image" title='3'>
            </div>
            <div class="slide">
                <img src="Your-image-url-here" alt="Fourth Image" title='4'>
            </div>
        </div>
        <div id="next" class='next nextSection navigate'>
            <span>&#8250;</span>
        </div>
    </div>
</div>
<script src='https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/helperFunctions.js'></script>
<script src='https://cdn.rawgit.com/mmnauman/allbloggertricks.com-slider/336811e5/script.js'></script>

Click Here To Open Raw Code:

Customization:

• The Red Highlighted Text is responsible for The Image link so change every instance and add image URL with the extension .jpeg/png/gif, etc

• The Orange Highlighted Text is Responsible for The alt text for the image so change this text and add your preferred text.

• The Light-blue Highlighted Text is Responsible Title o the image you added to the slider. Change this numbers with your image title. This will appear if the image is not loaded properly.

Adding or Removing Slides:

If you want to add more slides then all you need to do is add this div section after the slide ended.

 <div class="slide">
                <img src="Your-image-url-here" alt="Image" title='ImageName'>
</div>

Add this above div section to add an extra slide. You can add how many slides you want there is no limit just one tip.

Tip: UseSmall Size images or compressed images so that the slider load the images faster.

To remove the slide from the slide all you need to do is find and remove the above div section.

Conclusion:

This image slider is unique and can make your site/blog look more premium and more engaging. So add it to your site and if you face any problem you can contact us here in the comments section or check out our project on Github and comment there. 

https://github.com/mmnauman/ABTSlider

That's It Thanks For Following our Tutorial '' jQuery Pretty Image Slider v1.0 with partially visible side slides '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Read more »

Blogger Allows Custom domains to use SSL Certificate! HTTPS 2018

Hello, Friends Today we are sharing one of the biggest NEWS of 2018 for blogger users. Last year blogger started to allow Blogspot blogs to use SSL certificate on their blogs. But that support was limited to Blogspot users and they promised to add the support for custom domains too. Now blogger has fulfilled their promised and has now supported SSL/HTTPS for custom domains too. 

With just two ticks your blogger blog will migrate to HTTPS secure version and also Google said HTTPS is also a factor for SEO considering this it will little boost your site SEO and SERP.

Let's discuss the advantages of using it on our blogs.

Advantages of SSL Certificates Why to use it in Blogs?

Blogs will become more secure against the vulnerabilities:
                           Yes, Right Blog will become more secure as a secure connection between visitors and blog will establish when a user opens a post on your blog the connected will be encrypted.

HTTPS is one of the factors of SEO:
                  Like we said above adding SSL certificate will boost your site SEO and improve your blog SERP ranking on Google, Bing and Other Search Engines compare to non-https blogs.

Your Blog will now become a professional blog:
           Yes you heard right your blog will become a professional blog as it will have a valid SSL certificate and all the security measures will be present in the professional and paid blogs.

SSL Certificate is Free so why not to add?
          Blogger is giving us this SSL certificate Free without charging any penny so why not use it and get all the above benefits. From last year we were seeing other platform users like Wordpress etc they got so many benefits so now Google Started to give this similar benefits so why not use it.

Now let start adding the HTTPS to our sites this process involves 2 ticks :P yes this is so simple, easier than chopping slices of apple.

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: Go to the basic of Settings Then you will see a separate HTTPS Section as shown in the image below.

STEP 3: Now change the HTTPS Settings to Yes as shown in the image above and follow it. Click on the image to enlarge it and see clearly.

STEP 4: Now change the HTTPS Availability Settings to Yes. Now it will take few minutes for the process to complete.

STEP 5: waiting few minutes after switching on the HTTPS Redirect switch the HTTPS redirect to yes this will force to redirect non-https pages to https. 

Read more »

JavaScript shortcuts DOM Element Helper Functions for fast coding

Hello! Friends I was working on a website and was just using JavaScript, not any library as it was the demand. So I thought I should create a helper function that could make our code shorter like for example I have a div element with the ID of the container. I need to select it and assign it to a variable.

Normally we have to select it like this:

Example:

var container = document.getElementById("container");

If I need to select more elements with the id's then the same code will be repeated just the difference in id's

So to make it simple like in JQuery we select the same Id in this way:

Example:

var container = $("#container");

See how JQuery saved our time but here if we don't want to use any library then what? that's why I have created a helper function. That will work similar to jquery or easier then Jquery.

This is the function we have created a helper function to get the id of the element.

function $(h){    var idSelector = document.getElementById(h);    return idSelector;}

Here we have created a function with the name of $ (dollar) and it accepts a parameter.

In this function, we have assigned a variable idSelector and given the value of document.getElementById(h);

After declaring, it will return the variable.

Now after using this function, we can get the Id of the element similar to jQuery

Example: if you have a div with the id of a container:

<div id="container">Hello, All blogger tricks</div>

Now to get the id we just need to call the above callback function:\

var content = $("container"); // Here we are calling the function name i,e $ and the parenthesis and the id name.

We will update this post as we create more helper function to get elements by tag and class name also.

Read more »