I want to make this slider in html

I wantt to make this slider


in html to reduce page load
share-ask.com
Any other suggestions to speed up my site appreciated

Where is the code for the slider?
Why do you think writing it in HTML and CSS will reduce page loading time?

<off-topic>
I do not believe that  I't  is a real English contraction. Please spell it out as whole words. (I might learn something. :slightly_smiling_face: )
</off-topic>

Where is the code for the slider?
To answer this query u mus know coding

Please spell it out as whole words. (I might learn something. :slightly_smiling_face: )
which plz specify

Please post a URL to the location with the code for the slider.

<off-topic>
Please write   I't   as whole words.
</off-topic>

Please write I't as whole words.
done

Thank you. I am not familiar with many text shortcuts. :wink:

So how far have you got?

slider doesbt function if i copy code

Isn’t that were you started? Where you were when you created this thread?

Where can we see the code for the slider?

Why do you think re-writing the code in HTML and CSS will reduce page loading time?

How is the code written now if it is not HTML and CSS?

We need useful information from you in order to work on the issue.

Where can we see the code for the slider?
U need to be developer to answer dis

Why do you think re-writing the code in HTML and CSS will reduce page loading time?
Calls php make to dbase makes me fill HTML and CSS will improve speed

How is the code written now if it is not HTML and CSS?

        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                                        <li class="flex-active-slide" style="width: 736px; margin-right: 0px; float: left; display: block;">
                        <div class="hm-slider-container" data-loc="https://share-ask.com/top-quotes-images-on-life/">

                            <div class="hm-slide-holder" style="background: url(https://share-ask.com/wp-content/uploads/quotes/waynedyer382838.jpg);">

                                <div class="hm-slide-content">

                                    <div class="hm-slider-details">
                                        <div class="cat-links"><a href="https://share-ask.com/category/quotes/" rel="category tag">Quotes</a></div>                                            <a href="https://share-ask.com/top-quotes-images-on-life/" rel="bookmark"><h3 class="hm-slider-title">Worlds Best Quotes Images</h3></a>
                                        <div class="slide-entry-meta">
                                            <span class="posted-on"><a href="https://share-ask.com/top-quotes-images-on-life/" rel="bookmark"><time class="entry-date published" datetime="2019-04-04T07:21:54+00:00">April 4, 2019</time><time class="updated" datetime="2019-04-28T08:32:58+00:00">April 28, 2019</time></a></span><span class="meta-sep"> - </span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://share-ask.com/author/bpshbp/">Share-ask.com</a></span></span><span class="meta-sep"> - </span><span class="comments-link"><a href="https://share-ask.com/top-quotes-images-on-life/#comments">19 Comments.</a></span>                                            </div><!-- .entry-meta -->
                                    </div><!-- .hm-slider-details -->

                                </div><!-- .hm-slide-content -->

                            </div><!-- .hm-slide-holder -->

                        </div><!-- .hm-slider-container -->
                    </li>

                                        <li style="width: 736px; margin-right: 0px; float: left; display: block;">
                        <div class="hm-slider-container" data-loc="https://share-ask.com/10-famous-quotes-about-successful-entrepreneurs/">

                            <div class="hm-slide-holder" style="background: url(https://share-ask.com/wp-content/uploads/inspirational-quotes-on-life-challenges-with-images.jpg);">

                                <div class="hm-slide-content">

                                    <div class="hm-slider-details">
                                        <div class="cat-links"><a href="https://share-ask.com/category/quotes/" rel="category tag">Quotes</a></div>                                            <a href="https://share-ask.com/10-famous-quotes-about-successful-entrepreneurs/" rel="bookmark"><h3 class="hm-slider-title">10 famous quotes about successful Entrepreneurs</h3></a>
                                        <div class="slide-entry-meta">
                                            <span class="posted-on"><a href="https://share-ask.com/10-famous-quotes-about-successful-entrepreneurs/" rel="bookmark"><time class="entry-date published" datetime="2017-02-05T13:37:50+00:00">February 5, 2017</time><time class="updated" datetime="2019-02-14T08:31:53+00:00">February 14, 2019</time></a></span><span class="meta-sep"> - </span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://share-ask.com/author/bpshbp/">Share-ask.com</a></span></span><span class="meta-sep"> - </span><span class="comments-link"><a href="https://share-ask.com/10-famous-quotes-about-successful-entrepreneurs/#respond">Leave a Comment</a></span>                                            </div><!-- .entry-meta -->
                                    </div><!-- .hm-slider-details -->

                                </div><!-- .hm-slide-content -->

                            </div><!-- .hm-slide-holder -->

                        </div><!-- .hm-slider-container -->
                    </li>

                                        <li style="width: 736px; margin-right: 0px; float: left; display: block;">
                        <div class="hm-slider-container" data-loc="https://share-ask.com/10-morning-rituals-of-successful-entrepreneurs-infographic-health-entrepreneurs-sleep-lifestyle/">

                            <div class="hm-slide-holder" style="background: url(https://share-ask.com/wp-content/uploads/How-to-Get-Fit-in-Seconds.jpg);">

                                <div class="hm-slide-content">

                                    <div class="hm-slider-details">
                                        <div class="cat-links"><a href="https://share-ask.com/category/quotes/" rel="category tag">Quotes</a></div>                                            <a href="https://share-ask.com/10-morning-rituals-of-successful-entrepreneurs-infographic-health-entrepreneurs-sleep-lifestyle/" rel="bookmark"><h3 class="hm-slider-title">10 Morning Rituals of Successful Entrepreneurs infographic #Health #Entrepreneurs #Sleep #Lifestyle</h3></a>
                                        <div class="slide-entry-meta">
                                            <span class="posted-on"><a href="https://share-ask.com/10-morning-rituals-of-successful-entrepreneurs-infographic-health-entrepreneurs-sleep-lifestyle/" rel="bookmark"><time class="entry-date published" datetime="2015-09-25T08:41:37+00:00">September 25, 2015</time><time class="updated" datetime="2017-03-25T11:42:01+00:00">March 25, 2017</time></a></span><span class="meta-sep"> - </span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://share-ask.com/author/bpshbp/">Share-ask.com</a></span></span><span class="meta-sep"> - </span><span class="comments-link"><a href="https://share-ask.com/10-morning-rituals-of-successful-entrepreneurs-infographic-health-entrepreneurs-sleep-lifestyle/#respond">Leave a Comment</a></span>                                            </div><!-- .entry-meta -->
                                    </div><!-- .hm-slider-details -->

                                </div><!-- .hm-slide-content -->

                            </div><!-- .hm-slide-holder -->

                        </div><!-- .hm-slider-container -->
                    </li>

                                        <li style="width: 736px; margin-right: 0px; float: left; display: block;">
                        <div class="hm-slider-container" data-loc="https://share-ask.com/10-great-ways-on-how-to-beat-procrastination-infographic/">

                            <div class="hm-slide-holder" style="background: url(https://share-ask.com/wp-content/uploads/Successful-Weight-Loss-ways.jpg);">

                                <div class="hm-slide-content">

                                    <div class="hm-slider-details">
                                        <div class="cat-links"><a href="https://share-ask.com/category/quotes/" rel="category tag">Quotes</a></div>                                            <a href="https://share-ask.com/10-great-ways-on-how-to-beat-procrastination-infographic/" rel="bookmark"><h3 class="hm-slider-title">10 Great ways on how to beat procrastination Infographic</h3></a>
                                        <div class="slide-entry-meta">
                                            <span class="posted-on"><a href="https://share-ask.com/10-great-ways-on-how-to-beat-procrastination-infographic/" rel="bookmark"><time class="entry-date published" datetime="2015-09-25T08:27:24+00:00">September 25, 2015</time><time class="updated" datetime="2017-03-25T11:42:15+00:00">March 25, 2017</time></a></span><span class="meta-sep"> - </span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://share-ask.com/author/bpshbp/">Share-ask.com</a></span></span><span class="meta-sep"> - </span><span class="comments-link"><a href="https://share-ask.com/10-great-ways-on-how-to-beat-procrastination-infographic/#respond">Leave a Comment</a></span>                                            </div><!-- .entry-meta -->
                                    </div><!-- .hm-slider-details -->

                                </div><!-- .hm-slide-content -->

                            </div><!-- .hm-slide-holder -->

                        </div><!-- .hm-slider-container -->
                    </li>

                                        <li style="width: 736px; margin-right: 0px; float: left; display: block;">
                        <div class="hm-slider-container" data-loc="https://share-ask.com/20-motivational-quotes-from-legendary-entrepreneurs-leaders-and-visionaries/">

                            <div class="hm-slide-holder" style="background: url(https://share-ask.com/wp-content/uploads/rich-people-who-give-money-to-poor-people.jpg);">

                                <div class="hm-slide-content">

                                    <div class="hm-slider-details">
                                        <div class="cat-links"><a href="https://share-ask.com/category/quotes/" rel="category tag">Quotes</a></div>                                            <a href="https://share-ask.com/20-motivational-quotes-from-legendary-entrepreneurs-leaders-and-visionaries/" rel="bookmark"><h3 class="hm-slider-title">20 Motivational Quotes from Legendary Entrepreneurs, Leaders and Visionaries…</h3></a>
                                        <div class="slide-entry-meta">
                                            <span class="posted-on"><a href="https://share-ask.com/20-motivational-quotes-from-legendary-entrepreneurs-leaders-and-visionaries/" rel="bookmark"><time class="entry-date published" datetime="2015-09-25T07:43:45+00:00">September 25, 2015</time><time class="updated" datetime="2019-02-14T08:36:40+00:00">February 14, 2019</time></a></span><span class="meta-sep"> - </span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://share-ask.com/author/bpshbp/">Share-ask.com</a></span></span><span class="meta-sep"> - </span><span class="comments-link"><a href="https://share-ask.com/20-motivational-quotes-from-legendary-entrepreneurs-leaders-and-visionaries/#respond">Leave a Comment</a></span>                                            </div><!-- .entry-meta -->
                                    </div><!-- .hm-slider-details -->

                                </div><!-- .hm-slide-content -->

                            </div><!-- .hm-slide-holder -->

                        </div><!-- .hm-slider-container -->
                    </li>

                                </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div><!-- .flexslider -->
    </section><!-- .slider -->

    
    <div id="hm-carousel" class="flexslider">
        <!-- .slides -->
    <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            
                    <li class="flex-active-slide" style="width: 135px; margin-right: 10px; float: left; display: block;">
                        <div class="hm-thumb-bg"><img src="https://share-ask.com/wp-content/uploads/quotes/waynedyer382838.jpg" draggable="false"></div>
                    </li>

                
                    <li style="width: 135px; margin-right: 10px; float: left; display: block;">
                        <div class="hm-thumb-bg"><img src="https://share-ask.com/wp-content/uploads/inspirational-quotes-on-life-challenges-with-images.jpg" draggable="false"></div>
                    </li>

                
                    <li style="width: 135px; margin-right: 10px; float: left; display: block;">
                        <div class="hm-thumb-bg"><img src="https://share-ask.com/wp-content/uploads/How-to-Get-Fit-in-Seconds.jpg" draggable="false"></div>
                    </li>

                
                    <li style="width: 135px; margin-right: 10px; float: left; display: block;">
                        <div class="hm-thumb-bg"><img src="https://share-ask.com/wp-content/uploads/Successful-Weight-Loss-ways.jpg" draggable="false"></div>
                    </li>

                
                    <li style="width: 135px; margin-right: 10px; float: left; display: block;">
                        <div class="hm-thumb-bg"><img src="https://share-ask.com/wp-content/uploads/rich-people-who-give-money-to-poor-people.jpg" draggable="false"></div>
                    </li>

                            </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li><li class="flex-nav-next"><a class="flex-next flex-disabled" href="#" tabindex="-1">Next</a></li></ul></div><!-- #hm-carousel -->

</div>

The slider on your site at the moment uses JavaScript. If you want a pure CSS version, then I suggest you try searching for one.

Using “pure CSS responsive slider” as a search term yields numerous results. You just need to find one which suits your purposes.

I don’t know the specifics so I could be wrong, but …

If I wanted a non-javascript slider, it would not be to improve page speed, it would be to have a slider when javascript failed for whatever reason.

If I wanted to improve page speed, I would first look to optimizing the images. Most likely javascript’s impact on page speed is insignificant compared to the image files.

This could be tested by having two pages, one with all of the images in the page no slider / no javascript, and the other page with all of the images in the javascript slider.

1 Like

But cant we avoid php,javascript as they make server calls to dbase which can create problem of slow speed

You do not need to use a database to create a slider. You can hard-code the images into the page and use JavaScript (or CSS) to control the change from one to the next.

I would, however, be surprised if removing the database call makes any perceptible difference to the page load time.

1 Like

can u give me code to replace my exisitng slider i dont need plugin ,nor javascript

See post #12 for advice - and a link - on finding a pure HTML/CSS slider.

1 Like

where
?

Post #12 in this thread.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.