bxSliderの隣に文字を入れる方法

bxSliderの隣に文字を入れたいのですが、いろいろ試したのですがbxSliderが消えてしまい、なかなかうまくいきません。どのようにしたらbxSliderの横に文字を入れることができるのでしょうか。

html
1     <ul class="slider">
2       <li><img src="image/a1.jpg" title=""></li>
3       <li><img src="image/a2.jpg" title=""></li>
4       <li><img src="image/a3.jpg" title=""></li>
5       <li><img src="image/a4.jpg" title=""></li>
6       <li><img src="image/a5.jpg" title=""></li>
7       <li><img src="image/a6.jpg" title=""></li>
8       <li><img src="image/a7.jpg" title=""></li>
9       <li><img src="image/a8.jpg" title=""></li>
10       <li><img src="image/a9.jpg" title=""></li>
11       <li><img src="image/a10.jpg" title=""></li>
12     </ul>
13     <ul class="profilesetsumei">
14       <li>
15         <p class="sldstc">文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら文章はこちら</p>
16         <a href="profile.html" class="btn bgskew"><span>Profileページ</span></a>
17        </li>
18      </ul>

css
1.bx-wrapper {
2  position: relative;
3  margin-bottom: 60px;
4  padding: 0;
5  *zoom: 1;
6  -ms-touch-action: pan-y;
7  touch-action: pan-y;
8}
9.bx-wrapper img {
10  max-width: 100%;
11  display: block;
12  margin-top: -15px;
13}
14.bxslider {
15  margin: 0;
16  padding: 0;
17}
18ul.bxslider {
19  list-style: none;
20}
21.bx-viewport {
22  /*fix other elements on the page moving (on Chrome)*/
23  -webkit-transform: translatez(0);
24}
25/** THEME
26===================================*/
27.bx-wrapper {
28  -moz-box-shadow: 0 0 5px #ccc;
29  -webkit-box-shadow: 0 0 5px #ccc;
30  box-shadow: 0 0 5px #ccc;
31  border: 5px solid #fff;
32  background: #fff;
33}
34.bx-wrapper .bx-pager,
35.bx-wrapper .bx-controls-auto {
36  position: absolute;
37  bottom: -30px;
38  width: 100%;
39}
40/* LOADER */
41.bx-wrapper .bx-loading {
42  min-height: 50px;
43  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
44  height: 100%;
45  width: 100%;
46  position: absolute;
47  top: 0;
48  left: 0;
49  z-index: 2000;
50}
51/* PAGER */
52.bx-wrapper .bx-pager {
53  text-align: center;
54  font-size: .85em;
55  font-family: Arial;
56  font-weight: bold;
57  color: #666;
58  padding-top: 20px;
59}
60.bx-wrapper .bx-pager.bx-default-pager a {
61  background: #666;
62  text-indent: -9999px;
63  display: block;
64  width: 10px;
65  height: 10px;
66  margin: 0 5px;
67  outline: 0;
68  -moz-border-radius: 5px;
69  -webkit-border-radius: 5px;
70  border-radius: 5px;
71}
72.bx-wrapper .bx-pager.bx-default-pager a:hover,
73.bx-wrapper .bx-pager.bx-default-pager a.active,
74.bx-wrapper .bx-pager.bx-default-pager a:focus {
75  background: #000;
76}
77.bx-wrapper .bx-pager-item,
78.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
79  display: inline-block;
80  vertical-align: bottom;
81  *zoom: 1;
82  *display: inline;
83}
84.bx-wrapper .bx-pager-item {
85  font-size: 0;
86  line-height: 0;
87}
88/* DIRECTION CONTROLS (NEXT / PREV) */
89.bx-wrapper .bx-prev {
90  left: 10px;
91  background: url('images/controls.png') no-repeat 0 -32px;
92}
93.bx-wrapper .bx-prev:hover,
94.bx-wrapper .bx-prev:focus {
95  background-position: 0 0;
96}
97.bx-wrapper .bx-next {
98  right: 10px;
99  background: url('images/controls.png') no-repeat -43px -32px;
100}
101.bx-wrapper .bx-next:hover,
102.bx-wrapper .bx-next:focus {
103  background-position: -43px 0;
104}
105.bx-wrapper .bx-controls-direction a {
106  position: absolute;
107  top: 50%;
108  margin-top: -16px;
109  outline: 0;
110  width: 32px;
111  height: 32px;
112  text-indent: -9999px;
113  z-index: 9999;
114}
115.bx-wrapper .bx-controls-direction a.disabled {
116  display: none;
117}
118/* AUTO CONTROLS (START / STOP) */
119.bx-wrapper .bx-controls-auto {
120  text-align: center;
121}
122.bx-wrapper .bx-controls-auto .bx-start {
123  display: block;
124  text-indent: -9999px;
125  width: 10px;
126  height: 11px;
127  outline: 0;
128  background: url('images/controls.png') -86px -11px no-repeat;
129  margin: 0 3px;
130}
131.bx-wrapper .bx-controls-auto .bx-start:hover,
132.bx-wrapper .bx-controls-auto .bx-start.active,
133.bx-wrapper .bx-controls-auto .bx-start:focus {
134  background-position: -86px 0;
135}
136.bx-wrapper .bx-controls-auto .bx-stop {
137  display: block;
138  text-indent: -9999px;
139  width: 9px;
140  height: 11px;
141  outline: 0;
142  background: url('images/controls.png') -86px -44px no-repeat;
143  margin: 0 3px;
144}
145.bx-wrapper .bx-controls-auto .bx-stop:hover,
146.bx-wrapper .bx-controls-auto .bx-stop.active,
147.bx-wrapper .bx-controls-auto .bx-stop:focus {
148  background-position: -86px -33px;
149}
150/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
151.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
152  text-align: left;
153  width: 80%;
154}
155.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
156  right: 0;
157  width: 35px;
158}
159/* IMAGE CAPTIONS */
160.bx-wrapper .bx-caption {
161  position: absolute;
162  bottom: 0;
163  left: 0;
164  background: #666;
165  background: rgba(80, 80, 80, 0.75);
166  width: 100%;
167}
168.bx-wrapper .bx-caption span {
169  color: #fff;
170  font-family: Arial;
171  display: block;
172  font-size: .85em;
173  padding: 10px;
174}
175
176.bx-wrapper {
177  background-color: transparent;
178  margin: 0px auto;
179  border: none;
180  box-shadow: none;
181}
182.bx-wrapper img {
183  display: block;
184  margin: 0px auto;
185}
186

javascript
1    $(document).ready(function(){
2      $('.slider').bxSlider({
3        minSlides: 1,
4        maxSlides: 1,
5        slideWidth: 1200,
6        slideMargin: 2,
7        captions: false,
8        infineteLoop: true,
9        pager: false,
10        controls: true,
11        auto: true,
12        pause: 4000,
13        speed: 1000,
14        mode: 'fade',
15      });
16    });

行動規範の内容に同意します

回答1件

こういうことでしょうか。

css
1    .bx-wrapper {
2      background-color: transparent;
3      margin: 0px auto;
4      border: none;
5      box-shadow: none;
6      flex: 0 0 80%;
7    }
8
9    body { /* body直下の場合 */
10      display: flex;
11    }