Slider üstü alan sabitleme. [Yardım]

Elimde bir tasarım var, slider üzerinde çalışan bir rezervasyon formu var. Her slider değiştiğinde buda değişiyor. Ben slider değişsin ama rezervasyon formu sabit yerinde dursun istiyorum.

http://caruikit.com/source/auto-rental.html

buradaki adresten inceleyebilirsiniz. html sayfada çözülebilecek bir durum gibi geliyor bana, js ya da css te değişim yapmaya gerek yok diye düşünüyorum.

Her arabanın kiralama formu farklı bu sitede hocam. Bu yüzden slider değiştikçe form değişiyor.

css'de rezervasyon formunun divini position:fixed yapmayı dener misiniz bi.

        <!-- rent carousel -->
        <div id="rent-me" class="carousel slide rent-carousel" data-ride="carousel">
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">

            <!-- first slide -->
            <div class="item third active">
              <div class="container">
                <div class="row">
                  <div class="col-md-7 col-lg-6">
                    <div class="car-desc animated fadeInLeft">
                      <h1 class="text-uppercase">
                        Lamborghini Huracan <span>2016</span>
                      </h1>
                      <span class="spects">
                        Hypercar, 2 doors, 2 seats. 1 bags fit in. Automatic transmission, air conditioning.
                        Minimum age requirement: 25 years
                      </span>
                      <span class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                      </span>
                    </div>
                  </div>
                  <img src="http://via.placeholder.com/650x350" alt="mercedes-benz" class="img-responsive animated fadeInLeft">
                  <div class="col-md-5 col-lg-offset-2 col-lg-4">
                    <div class="rent-blk-rows bg-white shadow animated fadeInRight">
                      <div class="blk-intro">
                        <h4 class="pull-left">Rent this car</h4>
                        <span class="pull-right rent-price">
                          &dollar;100+<small>/day</small>
                        </span>
                        <div class="clearfix"></div>
                      </div>
                      <div class="row blk-content">
                        <div class="col-sm-12 col-lg-12 form-group">
                          <label>Pick-up place </label>
                          <select class="cd-select select-region" style="width: 100%;">
                            <option value="1">Sunset Beach Blvd, Niceville, FL 32578</option>
                            <option value="2">Arizona</option>
                            <option value="3">Texas</option>
                            <option value="4">New York</option>
                            <option value="5">Los Angeles</option>
                          </select>
                          <div class="customLoc">
                            <select class="cd-select select-region" style="width: 100%;">
                              <option value="1">Boston, NewStreet, BL 32578</option>
                              <option value="2">Arizona</option>
                              <option value="3">Texas</option>
                              <option value="4">New York</option>
                              <option value="5">Los Angeles</option>
                            </select>
                          </div>
                          <button type="button" class="btn btn-link addLoc">Specify a different drop-off location</button>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Pick-up date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Drop-off date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-12 col-lg-12">
                          <a href="#" class="btn btn-default" data-toggle="modal" data-target="#reservation-modal">Continue to car reservation <i class="fa fa-angle-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.first slide -->

            <!-- second slide -->
            <div class="item first">
              <div class="container">
                <div class="row">
                  <div class="col-md-7 col-lg-6">
                    <div class="car-desc animated fadeInLeft">
                      <h1 class="text-uppercase">
                        Mercedes-Benz SL 65 AMG <span>2016</span>
                      </h1>
                      <span class="spects">
                        Roadster, 2 doors, 2 seats. 2 bags fit in. Automatic transmission, air conditioning.
                        Minimum age requirement: 25 years
                      </span>
                      <span class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                      </span>
                    </div>
                  </div>
                  <img src="http://via.placeholder.com/650x350" alt="mercedes-benz" class="img-responsive animated fadeInLeft">
                  <div class="col-md-5 col-lg-offset-2 col-lg-4">
                    <div class="rent-blk-rows bg-white shadow animated fadeInRight">
                      <div class="blk-intro">
                        <h4 class="pull-left">Rent this car</h4>
                        <span class="pull-right rent-price">
                          <s>&dollar;145+</s>&dollar;120+<small>/day</small>
                        </span>
                        <div class="clearfix"></div>
                      </div>
                      <div class="row blk-content">
                        <div class="col-sm-12 col-lg-12 form-group">
                          <label>Pick-up place </label>
                          <select class="cd-select select-region" style="width: 100%;">
                            <option value="1">Sunset Beach Blvd, Niceville, FL 32578</option>
                            <option value="2">Arizona</option>
                            <option value="3">Texas</option>
                            <option value="4">New York</option>
                            <option value="5">Los Angeles</option>
                          </select>
                          <div class="customLoc">
                            <select class="cd-select select-region" style="width: 100%;">
                              <option value="1">Boston, NewStreet, BL 32578</option>
                              <option value="2">Arizona</option>
                              <option value="3">Texas</option>
                              <option value="4">New York</option>
                              <option value="5">Los Angeles</option>
                            </select>
                          </div>
                          <button type="button" class="btn btn-link addLoc">Specify a different drop-off location</button>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Pick-up date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Drop-off date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-12 col-lg-12">
                          <a href="#" class="btn btn-default" data-toggle="modal" data-target="#reservation-modal">Continue to car reservation <i class="fa fa-angle-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.second slide -->

            <!-- third slide -->
            <div class="item second">
              <div class="container">
                <div class="row">
                  <div class="col-md-7 col-lg-6">
                    <div class="car-desc animated fadeInLeft">
                      <h1 class="text-uppercase">
                        BMW 320i <span>2016</span>
                      </h1>
                      <span class="spects">
                        Limousine, 5 doors, 4 seats. 2 bags fit in. Automatic transmission, air conditioning.
                        Minimum age requirement: 25 years
                      </span>
                      <span class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                      </span>
                    </div>
                  </div>
                  <img src="http://via.placeholder.com/650x350" alt="mercedes-benz" class="img-responsive animated fadeInLeft">
                  <div class="col-md-5 col-lg-offset-2 col-lg-4">
                    <div class="rent-blk-rows bg-white shadow animated fadeInRight">
                      <div class="blk-intro">
                        <h4 class="pull-left">Rent this car</h4>
                        <span class="pull-right rent-price">
                          &dollar;100+<small>/day</small>
                        </span>
                        <div class="clearfix"></div>
                      </div>
                      <div class="row blk-content">
                        <div class="col-sm-12 col-lg-12 form-group">
                          <label>Pick-up place </label>
                          <select class="cd-select select-region" style="width: 100%;">
                            <option value="1">Sunset Beach Blvd, Niceville, FL 32578</option>
                            <option value="2">Arizona</option>
                            <option value="3">Texas</option>
                            <option value="4">New York</option>
                            <option value="5">Los Angeles</option>
                          </select>
                          <div class="customLoc">
                            <select class="cd-select select-region" style="width: 100%;">
                              <option value="1">Boston, NewStreet, BL 32578</option>
                              <option value="2">Arizona</option>
                              <option value="3">Texas</option>
                              <option value="4">New York</option>
                              <option value="5">Los Angeles</option>
                            </select>
                          </div>
                          <button type="button" class="btn btn-link addLoc">Specify a different drop-off location</button>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Pick-up date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append">
                          <label>Drop-off date and time</label>
                          <input type="text" placeholder="Choose a date" class="daySelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-6 col-lg-6 form-group input-append timepick">
                          <input type="text" placeholder="12:00 AM" class="timeSelect">
                          <span class="icon"><i class="fa fa-angle-down"></i></span>
                        </div>
                        <div class="col-sm-12 col-lg-12">
                          <a href="#" class="btn btn-default" data-toggle="modal" data-target="#reservation-modal">Continue to car reservation <i class="fa fa-angle-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.third slide -->
          </div>

          <!-- carousel progress bar -->
          <div class="progress-bar-bg">
            <div class="transition-timer-carousel-progress-bar"></div>
          </div>
        </div>
        <!-- /.rent carousel -->

Düzenlemeyi HTML içinde yapmam gerekiyor, her slider verisinde rezervasyon bloğu var. Yazılıma bu şekilde bağladığım zaman rezervasyon bloğuda gelen veri kadar kendini tekrar ediyor. Rezervasyon bloğunu slider div in içinden çıkarmam gerekiyor. Mesela 3 tane slider kodu olacak, devamında rezervasyon bloğu olacak ve div kapanacak.



Örnek sitede kullanım amacı dediğin gibi, ben slider olsun ama rezervasyon formu bağımsız olsun istiyorum. Kısacası arabalar arkadan geçip giderken önde rezervasyon formu kalacak sürekli. O gitmeyecek sağa sola.