AMP Web Stories

How to create a mini slider for web stories in WordPress.

In this blog, we will learn how to create a mini slider for web stories in WordPress like on this website. as we know that web stories are very popular these days, and every content creator wants to try them.

To have web stories on your website you have to either create or embed someone’s stories. There are lots of options available today for creating web stores, like Makestories.io, Newsroom AI, Web Storyz, etc also there are plugins available for WordPress like “Web Stories” by Google.

Also Read: How to create Web Stories in WordPress.

Lets see how to create a mini slider for web stories in WordPress

how to create a mini slider for web stories in WordPress

The slider is made in HTML and CSS, for adding the slider to your website you don’t need to have coding knowledge. This slider can be added to any WordPress Theme or custom website template.

The slider consists of two-part :

  • HTML code
  • CSS code

The HTML Code:

This is the code that is responsible for displaying sliders and web stories. whatever changes you want to make can be done here, like adding web story details, adding URLs, etc.

The CSS Code :

This code is responsible for styling everything including slider, story container, thumbnail, text, etc. You don’t need to edit this code until you are familiar with coding or you feel necessary.

Steps to Add Webstories Slider :

  • Log in to your wordpress website’s Dashboard.
  • First lets add the CSS code.
  • In the Left hand side Panel → go to → Apperiance → and click on → Customize.
  • Once the Customization panel opens click → ” Additional CSS ” .
  • Now past the below given code in the Additional CSS field.
/*amp-widget-stories.css*/

        .articleWdgt .swiper-container {
            padding: 15px 5px 15px 5px;
            width: calc(100% + 10px);
            margin-left: -5px;
            padding-top: 0;
            padding-bottom: 0
        }

        .articleWdgt .swiper-wrapper>.swiper-slide {
            height: auto;
            max-width: 200px
        }

        .articleWdgt .swiper-wrapper>.swiper-slide.ampTtl {
            background: url(https://thewebbeast.com/wp-content/uploads/2021/08/webstories-1.png) center 8px no-repeat;
            background-size: 24px auto;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 0;
            width: auto;
            line-height: 1.2;
            box-shadow: none;
            background-color: transparent
        }

        .articleWdgt .ampTtl a {
            color: var(--vj-cl-dr);
            font-size: 13px;
            line-height: normal;
            text-align: center;
            font-weight: 600
        }

        .articleWdgt .swiper-slide a {
            display: flex;
            color: var(--vj-cl-dr3);
            text-decoration: none;
            justify-content: center;
        }

        .articleWdgt .wdgtimg {
            padding: 0;
            border-radius: 4px;
            height: auto;
            top: 0;
            position: relative;
            margin: auto;
            margin-right: 10px;
            overflow: hidden;
            background-color: var(--vj-cl-lg);
        }

        .articleWdgt .wdgtTtl {
            text-align: left;
            line-height: 1.3
        }

        .articleWdgt .swiper-button-next,
        .articleWdgt .swiper-button-prev {
            outline: 0;
            background: url(../../static/web/images/arrow-lr.svg) center center no-repeat #fff;
            width: 36px;
            height: 36px;
            box-shadow: 0 0 8px rgba(0, 0, 0, .35);
            border-radius: 50%;
            background-size: 55px auto;
            opacity: .9;
            transition: all .2s linear;
            top: 0;
            bottom: 0;
            margin: auto
        }

        .articleWdgt .swiper-button-next:hover,
        .articleWdgt .swiper-button-prev:hover {
            opacity: 1
        }

        .articleWdgt .swiper-button-next:after,
        .articleWdgt .swiper-button-prev:after {
            display: none
        }

        .articleWdgt .swiper-button-disabled {
            display: none
        }

        .articleWdgt .swiper-button-prev {
            background-position: 12px center;
            left: 5px
        }

        .articleWdgt .swiper-button-next {
            background-position: -32px center;
            right: 5px
        }

        .articleWdgt.rhsArticle {
            position: relative;
            padding-left: 0
        }

        .articleWdgt.rhsArticle .swiper-wrapper>.swiper-slide.ampTtl {
            width: 50px;
            margin-right: 0
        }

        .articleWdgt.rhsArticle .swiper-container {
            margin-left: -5px;
            padding: 15px 5px;
            width: calc(100% + 10px)
        }

        .articleWdgt.rhsArticle .swiper-button-prev {
            left: -40px;
            background-position: 12px center
        }

        .articleWdgt.rhsArticle .swiper-button-next {
            right: 0;
            background-position: -33px center
        }

        .articleWdgt {
            background-color: var(--vj-cl-lg1);
            max-width: 100%;
            width: 100%;
            overflow: hidden;
            margin-bottom: 0
        }

        .articleWdgt .freeMode .swiper-wrapper {
            overflow-x: scroll;
            white-space: nowrap;
            width: 100%;
            padding-top: 15px;
            padding-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .articleWdgt .freeMode .swiper-wrapper>div:first-child {
            margin-left: 15px
        }

        .articleWdgt .ampTtl {
            background-position: center 0;
            padding-left: 15px;
            font-size: 17px;
            background-size: 20px auto;
            padding-top: 23px;
            display: inline-block;
            text-align: center;
            line-height: 1.1;
            padding-right: 15px;
            vertical-align: middle
        }

        .articleWdgt .swiper-wrapper .swiper-slide {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            text-align: center;
            white-space: normal;
            padding: 8px;
            border-radius: 4px;
            background-color: var(--vj-cl-lg);
            box-shadow: 0 0 28px 5px rgba(184, 184, 184, .15);
        }

        .articleWdgt .swiper-slide {
            min-width: 215px;
            width: 215px
        }

        .articleWdgt .wdgtTtl {
            font-weight: 500;
            font-size: 14px
        }

        .articleWdgt .wdgtimg {
            width: 52px;
            min-width: 52px
        }

        .articleWdgt .wdgtimg img {
            display: block
        }

        .wdgtArticl {
            width: calc(100% + 30px);
            margin-left: -15px;
            max-width: inherit
        }

        .articleWdgt .swiper-wrapper>.swiper-slide.wBg {
            min-width: auto;
            margin-left: 15px;
            padding: 38px 0 0;
            width: 60px;
        }

        .articleWdgt .swiper-wrapper>.swiper-slide:not(.ampTtl) {
            margin-left: -3px
        }

        .articleWdgt .wdgtTtl span.catNm {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--vj-cl-dr7);
            display: block;
            margin-bottom: 2px;
            margin-top: 0;
        }

        .articleWdgt .swiper-container .swiper-wrapper:after {
            content: '';
            padding: 0.1em;
            display: inline-block;
        }

        @media (prefers-color-scheme:dark) {
            .articleWdgt .swiper-wrapper>.swiper-slide.ampTtl {
                background: url(https://thewebbeast.com/wp-content/uploads/2021/08/webstories-1.png) center 8px no-repeat;
                background-size: 24px auto;
            }
        }

        /*stories.css*/
<div style="display:none"><a href='https://thewebbeast.com/category/amp-web-stories/'>AMP Web Stories</a></div>
        
      
  • After adding the code click → Publish in the top-left corner.
  • Now lets Add the HTML Code.
  • In the Left hand side Panel → go to → Apperiance → and click on → Widgets.
  • Once you are on the Widgets Page → go to → “HeaderWidget.
  • In Header widget add Custom HTML block.
  • Now past the below given HTML code in the field.


<div class="articleWdgt ">
		<div style="display:none"><a href='https://thewebbeast.com/category/amp-web-stories/'>AMP Web Stories</a></div>
            <div class="swiper-container freeMode">
                <div class="swiper-wrapper"><span class="swiper-slide ampTtl wBg">Web Stories</span>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/6-best-security-plugins-for-wordpress/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/Untitled-design-11.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/Untitled-design-11.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> wordpress </span><span>6 security plugins for wordpress in 2021</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/ganesh-chaturthi-wishing-ganesh-chaturthi-quotes/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-pexels-saurabh-narwade-5150054-scaled-1.jpg?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-pexels-saurabh-narwade-5150054-scaled-1.jpg?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> Festival </span><span>Ganesh chaturthi wishing quotes</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/how-to-create-web-stories-in-wordpress/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-web-stories-poster.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-web-stories-poster.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> Web-Stories </span><span>How to create web-stories in wordpress</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/ganesh-chaturthi-story-ganesh-chaturthi-status-video/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-ajeet-mestry-BtURpnC-J3U-unsplash-scaled-1.jpg?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-ajeet-mestry-BtURpnC-J3U-unsplash-scaled-1.jpg?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> Festival </span><span>Ganesh chaturthi story | status video</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/pavan-agrawal-deepawali-co-in/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/Pavan-Agrawal.png?im=FaceCrop,algorithm=dnn,width=540,height=720?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/Pavan-Agrawal.png?im=FaceCrop,algorithm=dnn,width=540,height=720?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> SEO </span><span> Pavan Agrawal | Deepawali.co.in</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/how-to-create-web-stories-in-wordpress/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-web-stories-poster.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/cropped-web-stories-poster.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> Web-Stories </span><span>How to create web-stories in wordpress</span></div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://thewebbeast.com/web-stories/?utm_source=www.thewebbeast.com&amp;utm_medium=wap-page&amp;utm_campaign=webstories" target="_blank">
                            <div class="wdgtimg"><img src="https://thewebbeast.com/wp-content/uploads/2021/08/webstories-1.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" data-src="https://thewebbeast.com/wp-content/uploads/2021/08/webstories-1.png?downsize=52:69&amp;output_quality=70&amp;format=jpg" alt="" class="lozad" data-loaded="true"></div>
                            <div class="wdgtTtl"><span class="catNm"> --- </span><span>All Web-stories → </span></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

  • Now you can replace the URL’s and Titles of webstories with your own in this HTML code.
  • The Result : If you do everything properly you will get the result, as given below
Share on:

Leave a Comment