chitrag Posted February 4, 2018 Share Posted February 4, 2018 Hi, I am trying to insert this code in my wordpress page. <!--start--> <div id="ninja-slider"> <div class="slider-inner"> <ul> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC0102-1.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC0159.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC_0097.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSCN0078-e1500520449485.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3200025.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3230075.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3230023.jpg"></a> <div class="caption"></div> </li> </ul> <div class="navsWrapper"> <div id="ninja-slider-prev"></div> <div id="ninja-slider-next"></div> </div> </div> </div> <!--end--> After inserting this code in to text area and click on visual it displays as follows <!--start--> <code> </code> <div id="ninja-slider"> <div class="slider-inner"> <ul> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> </ul> <div class="navsWrapper"> <div id="ninja-slider-prev"></div> <div id="ninja-slider-next"></div> </div> </div> </div> <!--end--> Why this happening what's wrong with html code. I could not figure out ? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2018 Share Posted February 4, 2018 Try adding within empty anchors and see if that makes a difference. It must be editor settings for cleaning html code by removing empy anchors. Link to comment Share on other sites More sharing options...
chitrag Posted February 4, 2018 Author Share Posted February 4, 2018 It does not make difference after inserting Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2018 Share Posted February 4, 2018 And the settings for cleaning the html from editor? Link to comment Share on other sites More sharing options...
chitrag Posted February 4, 2018 Author Share Posted February 4, 2018 How to do that ? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2018 Share Posted February 4, 2018 I can't answer that, it depends on editor used. I should check for documentation on your specific editor on disabling html tidy specific settings. Link to comment Share on other sites More sharing options...
chitrag Posted February 5, 2018 Author Share Posted February 5, 2018 <img class="ns-img" src="wp-content/uploads/2017/01/P3230023.jpg"> it works changing code as above Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2018 Share Posted February 5, 2018 Well yes! Thats no longer a empty anchor element, which we i thought was referring to. Link to comment Share on other sites More sharing options...
chitrag Posted February 5, 2018 Author Share Posted February 5, 2018 Thanks Well, now my issue is resize of caption font. I reduced the font size 10em to 1em in css but no effect Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2018 Share Posted February 5, 2018 Probably did it wrong somewhere, since I have no way of telling what you have done. Link to comment Share on other sites More sharing options...
chitrag Posted February 5, 2018 Author Share Posted February 5, 2018 Here is the css file. /* Visit http://www.menucool.com/responsive-slider for instructions */ #ninja-slider { width:100%; background:#FFF; padding: 0!important; margin:0 auto; overflow:hidden; box-sizing:border-box; } #ninja-slider .slider-inner { /*max-width:720px;*/ margin:0 auto;/*center-aligned */ font-size:0px; position:relative; box-sizing:border-box; } #ninja-slider ul { position:relative; list-style:none; padding:0; box-sizing:border-box; background:black; } #ninja-slider li { width:100%; height:100%; top:0; left:0; position: absolute; font-size:12px; list-style:none; margin:0; padding:0; opacity:0; overflow:hidden; box-sizing:border-box; } #ninja-slider li.ns-show { opacity:1; } /* --------- slider image ------- */ #ninja-slider .ns-img { background-color:rgba(0,0,0,0.8); background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/ /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/ border-radius:4px; cursor:default; display:block; position: absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; } /*---------- Captions -------------------*/ #ninja-slider .caption { font-size:10em; font-family: 'Bree Serif', sans-serif; position:absolute; width:100%; text-align:center; color:rgba(255,255,255,0.8); bottom:20%; } #ninja-slider li.ns-show .caption { /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */ -webkit-animation: titleAnimation 5s linear both; animation: titleAnimation 5s linear both; } #ninja-slider li.sl-0 .caption { /*delay caption animation for the initial slide*/ -webkit-animation: none; animation: none; display:none; } @keyframes titleAnimation { 0% { opacity:0; } 10% { opacity:0;transform: translateY(-20%);} 20% { opacity:1;transform: translateY(0%);} 70% {opacity:1;transform: translateY(0%);} 80% {opacity:0;transform: translateY(100%);} 100% {opacity:0;transform: translateY(100%);} } @-webkit-keyframes titleAnimation { 0% { opacity:0; } 10% { opacity:0; -webkit-transform:translateY(-20%);} 25% { opacity:1; -webkit-transform:translateY(0%);} 70% {opacity:1; -webkit-transform:translateY(0%);} 80% {opacity:0; -webkit-transform:translateY(100%);} 100% {opacity:0; -webkit-transform:translateY(100%);} } /* ---------Arrow buttons ------- */ /* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ /* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did. This demo has put them inside a DIV.navWrapper. */ div.navsWrapper { position:absolute; width:100px; height:50px; right:90px; bottom:9%; z-index:10; } #ninja-slider-prev, #ninja-slider-next { position: absolute; display:inline-block; width:50px; height:50px; line-height:52px; margin:0; border:2px solid white; backface-visibility:hidden; color:white; overflow:hidden; -webkit-user-select: none; user-select:none; font-family:sans-serif; font-size:14px; transition:all 0.5s; cursor:pointer; } #ninja-slider-prev { left:auto; right:50%; margin-right:-2px; } #ninja-slider-next { left:50%; right:auto; } #ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.6);} /*pagination within the prev/next buttons*/ #ninja-slider-prev div, #ninja-slider-next div {white-space:nowrap;opacity:0;position:absolute;} #ninja-slider-prev div {left:6px;} #ninja-slider-next div {right:6px;} #ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1;} #ninja-slider-prev:hover.disabled, #ninja-slider-next:hover.disabled {opacity:0.1;cursor:default;} /* arrows */ #ninja-slider-prev::before, #ninja-slider-next::before { position: absolute; top: 17px; content: ""; display: inline-block; width: 13px; height: 13px; border-left: 4px solid white; border-top: 4px solid white; backface-visibility:hidden; } #ninja-slider-prev::before { -ms-transform:rotate(-45deg);/*IE 9*/ -webkit-transform:rotate(-45deg); transform: rotate(-45deg); right:15px; } #ninja-slider-next::before { -ms-transform:rotate(135deg);/*IE 9*/ -webkit-transform:rotate(135deg); transform: rotate(135deg); left:15px; } /*------ pager(nav bullets) ------*/ /* The pager id should be: slider id + "-pager" */ #ninja-slider-pager, #ninja-slider-pause-play { display:none;} /*Responsive settings*/ @media only screen and (max-width:500px){ #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager { display:none; } } @media only screen and (max-width:1100px){ #ninja-slider .caption { font-size:7em; } } @media only screen and (max-width:700px){ #ninja-slider .caption { font-size:3em; } } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now