ericb2038

Not out of the box.
But changing the CSS to make it responsive is not hard 🙂

I used the twentytwelve template provided with the plugins and changed
wp-content/plugins/total-slider/templates/twentytwelve/style.css this way :

(“#featured” is a div created by the “responsive” theme)

(on small devices (phones) only the title is kept, the description text is hidden, otherwise the text recovers the image)

/*
Template Name: Twenty Twelve
Template URI: http://www.totalslider.com/
Description: Template designed for integration with the WordPress Twenty Twelve theme.
Author: Chris Van Patten (inspired by work done by the WordPress team)
Author URI: http://www.totalslider.com/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

#featured p {display:none !important; padding:0 !important}
#featured {padding:0 !important}

#featured p.ts-twentytwelve-description {display:block !important;}

.ts-twentytwelve {
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	height: 325px;
	position: relative;
}

.ts-twentytwelve-slide {
	background-size: cover;
	background-color: #ECECEC;
	background-position: center;
	list-style: none;
	margin: 0 !important;
	width: 100%;
	height: 325px;
	position: absolute;
	/*border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); */
}

.ts-twentytwelve-link {
	display: block;
	max-width: 600px;
	width: 80%;
	min-width: 200px;
	/*border: 10px solid transparent;*/
	color: #444 !important;
	font-size: 14px;
	text-decoration: none;
	position: absolute;
	left:0  !important;
	bottom:0 !important;}

.ts-twentytwelve-link:hover {
	text-decoration: none;
}

.ts-twentytwelve-overlay {
	background: rgba(80, 80, 80, 0.8);
	padding: 20px;
	position: absolute;
	left:0  !important;
	bottom:0 !important;
	/*border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	*/
}

.ts-twentytwelve-title {
	margin: 0 0 24px !important;
	line-height: 1.2 !important;
	font-size: 22px;
	font-weight: normal;
	color: #fff !important;
}

.ts-twentytwelve-description {
	line-height: 1.714285714;
	margin: 0 !important;
	color: #fff !important;
	text-align:left !important;
}

@media screen and (max-width: 640px) {
	#featured p.ts-twentytwelve-description {display:none !important; margin:0 !important;}
	.ts-twentytwelve-title {margin:0 !important}
}

Your mileage may vary with the widths/heights, but basically this does integrate total-slider pretty well with the ‘responsive’ theme using its child theme ‘responsive-full-content’. The text position in my case is set up to lower right for all slides (I negate the drag and drop feature of the text in the class : .ts-twentytwelve-overlay by setting the left and bottom to 0 with an “!important” modifier), but it’s pure laziness on my part, I did not want to write JS to reflect the modifications 🙂 )