The Web page is written using aspx pages. Where are there are no fixed rows and elements. Which gets changed dynamically.
Please review the attached code and let me know how to form CSS Selector path/Xpath to locate the button "showAirlineCreateButton", whose position changes dynamically.
<div class="row">
<div class="client_name col-xs-offset-2 col-xs-8">
<h4 class="ng-binding">TEST </h4>
</div>
<!-- ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in Airline_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="TESTListFirstTableTdImage" ng-src="http://10.255.109.100/TESTService/Services/../Repository/TEST/TEST/Logo.png" src="http://10.255.109.100/TESTService/Services/../Repository/TEST/TEST/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-JAN17-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="TESTScheduleMonth ng-binding">January</span> <br>
<span class="TESTScheduleYear ng-binding">2017</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">0 Assets</span><br>
<span class="TESTScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/TESTService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/TESTService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.277287287607944,47.2600401624634" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in TEST_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in TEST_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="AirlineScheduleListFirstTableTdImage" ng-src="http://10.255.109.100/TESTService/Services/../Repository/Airline/TEST/Logo.png" src="http://10.255.109.100/TESTService/Services/../Repository/Airline/TEST/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-DEC16-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="TESTScheduleMonth ng-binding">December</span> <br>
<span class="AirLineScheduleYear ng-binding">2016</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">29 Assets</span><br>
<span class="TESTScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.276617692292554,47.26013873493504" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in Airline_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="AirlineScheduleListFirstTableTdImage" ng-src="http://10.255.109.100/DASHService/Services/../Repository/Airline/Hong_Kong_Airlines/Logo.png" src="http://10.255.109.100/DASHService/Services/../Repository/Airline/Hong_Kong_Airlines/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-SEP16-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="AirLineScheduleMonth ng-binding">September</span> <br>
<span class="AirLineScheduleYear ng-binding">2016</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">50 Assets</span><br>
<span class="AirLineScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.275447404006268,47.260310966012774" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList -->
<div class="col-xs-8 col-xs-offset-2 div_add_btn">
<!-- ngIf: showAirlineCreateButton --><div class="col-xs-6 col-xs-offset-6 text-center add_btn_schedule ng-scope" ng-click="Show_AirName(Airline_item.Client_ID,Airline_item.ClientName,Airline_item.scheduleBasicDetailList[0].Schedule_ID)" data-toggle="modal" data-target="#myModal" data-ng-if="showAirlineCreateButton" role="button" tabindex="0">
<span class="fa fa-plus" aria-label="Create a Schedule">
</span>
/div><!-- end ngIf: showAirlineCreateButton -->
</div>
</div>
You can use this XPath that should work no matter where element located:
//div[#data-ng-if="showAirlineCreateButton"]
Related
I have this element where the code of the content is not inside normal html marks but inside a data-marker attribute of div :
<div class="profil-block d-flex firm" data-lat="45.812122" data-lon="3.112388" data-title="AGC CEGESMA" data-marker="<div class="profil-block firm w-auto m-0 p-0 no-box-shadow">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-block text-center">
<img class="avatar" src="/build/images/content/cabinet-anonyme.aa87fff0.svg"/>
</a>
<div class="name w-auto mt-2">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="text-decoration-none">AGC CEGESMA</a>
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"/>
</svg>
Clermont-Ferrand (63100)
</span>
<div class="info d-flex flex-row mt-2 justify-content-between align-items-center">
<div class="d-flex">
<span role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</span>
<span role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</span>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
">
<div class="d-flex align-items-start">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" title="En savoir plus sur le cabinet AGC CEGESMA">
<img src="/build/images/content/cabinet-anonyme.aa87fff0.svg" class="avatar" alt="AGC CEGESMA – Expert-comptable logo">
</a>
<div class="d-desktop-none">
<h3 class="name">
AGC CEGESMA
</h3>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:title="" xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
</div>
<div class="d-flex flex-column justify-content-between -medium">
<div class="d-desktop-block">
<div class="name">
AGC CEGESMA
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
<div class="competence-list">
<div class="competence ">RAY François</div>
</div>
</div>
<div class="info d-flex justify-content-between">
<div class="d-flex">
<div role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par téléphone">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</div>
<div role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par mail">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</div>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none" title="En savoir plus sur le cabinet AGC CEGESMA">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
I can retrieve the content with driver.find_elements(by=By.XPATH, value='//div[#class="profil-block d-flex firm"]').get_attribute('data-marker'), but then how to i select some buttons for example inside this attribute?
I need selenium to click a link inside this data-marker code
Thank you
I don't think it is possible to click on an element thats only in the data-marker. In your situation though you can just locate this element:
This code should work for locating that element:
driver.find_elements(by=By.XPATH, value='//div[#class="icon-block firm-contact cursor-pointer"]')
<div style="max-height:400px;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You can use position: absolute;z-index: 1; on banner,and change the position with margin.Here is a working demo:
<div style="max-height:400px;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
</div>
</div>
<div class="banner">
<h5>banner</h5>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
.banner {
background-color: black;
color: white;
height: 50px;
text-align: center;
margin-top: -50px;
position: absolute;
z-index: 1;
width:100%;
}
</style>
result:
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- ====================================================
header section -->
<header class="top-header" >
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<img src="img/logo.png" alt="" class="img-responsive logo">
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="http://www.mysite" >Home</a></li>
<li><a class="menu" href="#products">our products </a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
<section class="slider" id="home">
<div class="container-fluid">
<div class="row">
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<div class="header-backup"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<br />
<div class="container" id="products">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/women-care.jpg" style="width: 140px; height: 140px;">
<h2>Women Care</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/man-power.jpg" style="width: 140px; height: 140px;">
<h2>Man Power</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
</div>
<!-- map section -->
<section class="api-map" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map" id="map"></div>
</div>
</div>
</section><!-- end of map section -->
<!-- contact section starts here -->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-caption clearfix">
<div class="contact-Product Name text-center">
<h2>contact us</h2>
</div>
<div class="col-md-5 contact-info text-left">
<h3>contact information</h3>
<div class="info-detail">
<ul><li><i class="fa fa-calendar"></i><span>Monday - Sunday:</span> 24X7</li></ul>
<ul><li><i class="fa fa-map-marker"></i><span>Address:</span></li></ul>
<ul><li><i class="fa fa-phone"></i><span>Telephone:</span> </li></ul>
<ul><li><i class="fa fa-envelope"></i><span>Email:</span> info#mysite</li></ul>
</div>
</div>
<div class="col-md-6 col-md-offset-1 contact-form">
<h3>leave us a message</h3>
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
</div>
</div>
</div>
</div>
</section><!-- end of contact section -->
<!-- footer starts here -->
<footer class="footer clearfix">
<div class="container">
<div class="row">
<div class="col-xs-6 footer-para">
<p><i style="color:white;">©</i> <i style="color:white;">mysite</i> All right reserved</p>
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-skype"></i>
</div>
</div>
</div>
</footer>
<!-- script tags
============================================================= -->
<script src="js/jquery-2.1.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next = next.next();
if (next.length>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>
There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ
I created a carousel using Twitter Bootstrap 3 and I cannot get it to work correctly. The slides seem to Overlay each other and it does not cycle through them all. Checked for coding errors but found none. Here is a Jsfiddle with my code: (http://jsfiddle.net/N6Y4D/)
Or here:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src= "js/jquery-2.0.2.js"></script>
<script src= "js/bootstrap.js"></script>
</body>
Here is complete code for it.. Inside the 'carousel-inner' you have written as 'item-active' , it should be 'item active' Both are separate classes.
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> // error was occurring here it should item active not item-active
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>