javascript - Keep a list with img on a same line -

-

i know how place different li or div img inside centered on same line.

here picture of want have:

enter image description here

here did far:

as see li displayed vertically want display li horizontally.

what i've tried is: can if use position absolute li , display each 1 @ different % left:100% left first one, 200% second one,...

is solution? if want dynamically change image via javascript maybe it's more easy keep position:relative.

and here code.

html:

<div id="pagegallerie">    <div id="carre1" class="carre"></div>    <div id="carre2" class="carre"></div>    <div class="gallerie">       <li class="pictures" id="yo1"><img src="img/intro1.jpg" alt="smiley face"></li>       <li class="pictures"  id="yo2"><img src="img/intro2.jpg" alt="smiley face"></li>       <li class="pictures"  id="yo3"> <img src="img/intro3.jpg" alt="smiley face"></li>    </div> </div>

and css :

#pagegallerie {     position: absolute;     width: 100%;     height: 100%; } .gallerie {     position: absolute;     width: 90%;     height: 85%;     top: 7.5%;     bottom: 7.5%;     left: 5%;     right: 5%;     text-align: center;     overflow: hidden; } li {     position: relative;     display: inline-block;     list-style: none;     width: 100%;     height: 100%;     text-align: center; } li img {     width: auto;     height: 100%; } #carre1 {     left: 2.5%;     background-image: url("../img/arrowb.png"); } #carre2 {     right: 2.5%;     background-image: url("../img/arrow.png"); } #carre1:hover, #carre2:hover {     background-color: rgba(0,0,0,0.2); } .carre {     width: 60px;     height: 76px;     position: absolute;     top: 50%;     margin-top: -38px;     box-sizing: border-box;     background-size: cover;     background-repeat: no-repeat;     z-index: 1000;     background-color: rgba(0, 0, 0, 0.02);     cursor: pointer; }

here codepen made :

i have found these sliders you, in case if still need help.

you may clue creating own gallery, has multiple options sliders built jquery, sliders built out using jquery, slider arrow, slider without arrow, etc.., , lot more.

you can use library or can make own library making changes existing library if @ javascript.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

wso2esb - How to concatenate JSON array values in WSO2 ESB? -

-
we have json object below, expected result in: "(001),(011),(089),(120)". can suggest how iterate json array , concat values mention . "(001),(011),(089),(120)" thanks in advance. { "element": { "values": { "agentid": "aaaaa", "transactiondata": [ { "no": "001" }, { "no": "011" }, { "no": "089" }, { "no": "120" } ] } } } you can using iterate mediator, filter mediator , properties operation scope. try solution. @ end have (001),(011),(089),(120) value in concat-data property. have added complete proxy reference. <?xml version="1.0" encoding=...
Read more