Insert Slider to Post

  • Hi,

    I am trying to insert slider via post. The slider show just fine at single.php but it doesn’t render and not functioning when I submit it via post.

    Any suggestion to make it work?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Which slider? How are you adding it to the post? Via shortcode?

    Thread Starter Jacks89

    (@jacks89)

    This is how I added the code

    <div id="slider1_container" style="position: relative; width: 720px;
        height: 480px; overflow: hidden;">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(https://egglove.sg/wp-content/themes/Orion/js/jssor/img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 720px; height: 480px;
            overflow: hidden;">
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/01.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-01.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/02.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-02.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/03.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-03.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/04.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-04.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/05.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-05.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/06.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-06.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/07.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-07.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/08.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-08.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/09.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-09.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/10.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-10.jpg" />
            </div>

            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/11.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-11.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/12.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-12.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/13.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-13.jpg" />
            </div>
            <div>
                <img u="image" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/14.jpg" />
                <img u="thumb" src="https://egglove.sg/wp-content/themes/Orion/js/jssor/img/travel/thumb-14.jpg" />
            </div>
        </div>

        <!-- thumbnail navigator container -->
        <div u="thumbnavigator" class="jssort07" style="width: 720px; height: 100px; left: 0px; bottom: 0px;">
            <!-- Thumbnail Item Skin Begin -->
            <div u="slides" style="cursor: default;">
                <div u="prototype" class="p">
                    <div u="thumbnailtemplate" class="i"></div>
                    <div class="o"></div>
                </div>
            </div>

            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
            </span>
            <!-- Arrow Right -->
            <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
            </span>
            <!--#endregion Arrow Navigator Skin End -->
        </div>
        <!--#endregion Thumbnail Navigator Skin End -->
        <a style="display: none" href="https://www.jssor.com">Bootstrap Slider</a>
        <!-- Trigger -->
    </div>

    I’m currently testing the slider from jssor. I don’t want to install the plugin since it will not be intuitive for the user.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Insert Slider to Post’ is closed to new replies.