[Помогите] Прошу помощи в "кастрации" шаблона bootstrap

Очень нравится общий вид этого шаблона : http://www.templatemo.com/live/templatemo_423_artcore



Но в нем много для меня лишнего. Помогите отсечь не нужное но не повредить его работоспособность.



Этап 1: На главной странице в нижней части слайдер из 3х изображений, которые не меняются сами. Мне нужно убрать два скрытых изображения и тем самым упразднить слайдер - сделать обычную область с фоновым изображением и текстом.



Секция отвечающая за слайдер:
<code>
<divclass="swiper-container">
<divclass="swiper-wrapper">

<divclass="swiper-slide"style="background-image: url(images/slide1.jpg);">
<divclass="overlay-s"></div>
<divclass="slider-caption">
<divclass="inner-content">
<h2>Earth New House Project</h2>
<p>Artcore is free HTML5 template by <bclass="blue">template</b><bclass="green">mo</b>. Credit goes to <arel="nofollow"href="http://unsplash.com">Unsplash</a> for photos.</p>
<ahref="#"class="main-btn white">View Projects</a>
</div><!-- /.inner-content -->
</div><!-- /.slider-caption -->
</div><!-- /.swier-slide -->

<divclass="swiper-slide"style="background-image: url(images/slide2.jpg);">
<divclass="overlay-s"></div>
<divclass="slider-caption">
<divclass="inner-content">
<h2>Hotel and Residence Concept in Montenegro</h2>
<p>We come with new fresh and unique ideas.</p>
<ahref="#"class="main-btn white">View Projects</a>
</div><!-- /.inner-content -->
</div><!-- /.slider-caption -->
</div><!-- /.swier-slide -->

<divclass="swiper-slide"style="background-image: url(images/slide3.jpg);">
<divclass="overlay-s"></div>
<divclass="slider-caption">
<divclass="inner-content">
<h2>Natural 3d Architecture Design</h2>
<p>Natural concrete is a material which is calm and clean.</p>
<ahref="#"class="main-btn white">View Projects</a>
</div><!-- /.inner-content -->
</div><!-- /.slider-caption -->
</div><!-- /.swier-slide -->

</div><!-- /.swiper-wrapper -->
</div><!-- /.swiper-container -->
</code>

CSS:

<code>
.swiper-container {
overflow: hidden;
width:100%;
height:100%;
position: absolute;
top:0;
z-index:2;
}
@media screen and(max-width:768px){
.swiper-container {
top:120px;
}
.swiper-container a.main-btn {
display: none;
}
}

.swiper-wrapper {
width:100%;
height:100%;
}

.swiper-slide {
background-size: cover;
background-repeat:no-repeat;
width:100%;
height:100%;
position: relative;
z-index:8;
}

.overlay-s {
position:fixed;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.6);
z-index:9;
}

.slider-caption {
position: absolute;
overflow: hidden;
z-index:10;
width:100%;
top:53%;
color: white;
}
.slider-caption h2 {
color: white;
text-transform: uppercase;
font-weight:300;
font-size:2.5em;
margin-bottom:20px;
}
.slider-caption p {
margin-bottom:30px;
font-size:1.5em;
font-weight:300;
}
.slider-caption .inner-content {
width:60%;
margin:0auto;
}
.slider-caption a {
color: white;
}
.slider-caption a.main-btn:hover {
background-color: rgba(255,255,255,0.1);
}
@media screen and(min-width:769px)and(max-width:991px){
.slider-caption h2 {
font-size:1.7em;
}
.slider-caption p {
font-size:1em;
}
}
@media screen and(max-width:768px){
.slider-caption {
top:47%;
}
.slider-caption h2 {
font-size:1.7em;
}
.slider-caption p {
font-size:1em;
}
}
</code>

Этап 2: Меню. При уменьшении разрешения экрана, меню собирается в квадрат и скрывает пункты меню. В моем варианте предполагается всего 4 пункта меню и они вполне гармонично на другом шаблоне размещаются друг под другом.



Как заставить меню не собираться в квадрат а просто при сжатии выстраиваться столбиком?

 

этап 1 - убрать слайдер и вставить на его место фоновое изображение с текстом. Читать мэнуал
этап 2 - читать мэнуал

И уж если тут что-то будет не получаться, задавать вопросы в теме. А то сейчас вопросы выглядят так, что вам лучше обратиться в раздел платной помощи.

 

1. Из секции слайдера убери вот эти части. Тем самым уберешь слайды 2-3.

Код:

<divclass="swiper-slide"style="background-image: url(images/slide2.jpg);">
<divclass="overlay-s"></div>
<divclass="slider-caption">
<divclass="inner-content">
<h2>Hotel and Residence Concept in Montenegro</h2>
<p>We come with new fresh and unique ideas.</p>
<ahref="#"class="main-btn white">View Projects</a>
</div><!-- /.inner-content -->
</div><!-- /.slider-caption -->
</div><!-- /.swier-slide -->

<divclass="swiper-slide"style="background-image: url(images/slide3.jpg);">
<divclass="overlay-s"></div>
<divclass="slider-caption">
<divclass="inner-content">
<h2>Natural 3d Architecture Design</h2>
<p>Natural concrete is a material which is calm and clean.</p>
<ahref="#"class="main-btn white">View Projects</a>
</div><!-- /.inner-content -->
</div><!-- /.slider-caption -->
</div><!-- /.swier-slide -->

Далее. Убери из index.html
Вот эти элементы. Это кнопки перелистывания слайдера.

Код:

<a href="#" class="btn-left arrow-left fa fa-angle-left"></a>
<a href="#" class="btn-left arrow-right fa fa-angle-right"></a>

Далее. Зайди в файл plugins.js который лежит в папке js. В этом файле прописано несколько плагинов, в том числе и слайдер.
Там удали весь код, который отвечает за слайдер.
Ты легко найдешь код, так как код плагинов разделён многострочными комментариями.

Вот комментарий с которого начинается код слайдера. Удаляй весь код до кода следующего плагина.

Код:

/*
* Swiper 2.6.0
* Mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/sliders/swiper/
*
* Copyright 2010-2014, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under GPL & MIT
*
* Released on: April 9, 2014
*/

По меню советую заменить меню на другое банальной заменой плагина меню.