Μπορει καποιος φτιαξει λιγο το carousel της Bootstrap;

Predatorkill · 22 Μαρτίου 2017

Καλησπερα παιδες,

δειτε το παρακατω plunkr: https://plnkr.co/edit/ufO6EHvBDIsHmOk3p0S3?p=preview

Μπορει καποιος να φερει τα carousel indicators πανω δεξια και να «κολλησει» την εικονα με το κινητο μαζι με τις μεγαλες εικονες; Παλευω καμμια ωρα αλλα μου χει σπασει τα νευρα...

Καπως ετσι θελω να ειναι:

και οχι ετσι οταν η αναλυση της οθονης μεγαλωνει:

kwstaskara · 22 Μαρτίου 2017

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
	  .carousel-indicators {
          top: 0px;
          text-align: right;
          float: right;
          right: 13% !important;
          left: inherit;
      }
	  
	  
	  .phone  {
		left: 57%!important;
		z-index: 9999!important;
		display: block;
		top: 15%;
		position: absolute!important;
	  }
        .phone img {
            width: 100%;
            height: auto;
        }

    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  </head>

  <body>

	
	<div class="container">
	<div class="row">
    <div class="col-md-8">
      <div id="demo" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
		
        <div class="slidesWrap">
          <div class="carousel-inner">
            <div class="active item"><img src="https://s29.postimg.org/4eri19exz/slide_1.png"></div>
            <div class="item"><img src="https://s29.postimg.org/iz8kw39wn/slide_2.png"></div>
            <div class="item"><img src="https://s29.postimg.org/e1v0az7xj/slide_3.png"></div>
          </div>
		  
        </div>
      </div>
      
	  </div>
        <div class="phone"><img src="https://s24.postimg.org/awo1rcpd1/mobile.png"></div>
    </div>
  </div>
  </div>
  </section>
  </body>

</html>

Τώρα αν θες επιπλέον content βάλε άλλα rows κλπ.Μπορείς να βάλεις media queries αν θες να το κανεις για κινητά και φτιάξε τις διαστάσεις ανάλογα.Αλλίως μετά παίξε με το grid του boostrap.

Σύνδεση

Μπορει καποιος φτιαξει λιγο το carousel της Bootstrap;

Προτεινόμενες αναρτήσεις

Predatorkill

kwstaskara

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση